phoenix_ui

Phoenix ui

Remarque (2024-11-22): Je suis hors de l'écosystème Elixir depuis plus d'un an. Cependant, je suis récemment revenu et en revisitant cette bibliothèque, j'ai décidé de déplacer la portée de ce projet OSS. Les futures mises à jour adopteront un modèle similaire à ui.shadcdn.com, en se concentrant sur des composants conçus pour une intégration de copie et de coche facile dans vos applications.

Une bibliothèque d'interface utilisateur gratuite pour le framework Phoenix et Phoenix LiveView.

Installation

Phoenix UI dépend de Phoenix 1.6. Avant de continuer, veuillez vous assurer que vous avez mis à niveau votre application existante vers 1.6 ou l'application que vous avez générée utilise 1.6.

1. Installez le vent arrière CSS avec Phoenix

Suivez le guide officiel pour configurer CSS Tailwind dans un projet Phoenix.

2. Installer Phoenix UI

Disponible en Hex, le package peut être installé en ajoutant Phoenix_UI à votre liste de dépendances dans mix.exs:

 def deps do
  [
    { :phoenix_ui , "~> 0.1.9" } ,
  ]
end

La documentation peut être trouvée sur https://hexdocs.pm/phoenix_ui.

3. Configurez le vent arrière CSS pour importer des classes d'interface utilisateur Phoenix

Ajoutez un nouveau motif de chemin à assets/tailwind.config.js pour que Tailwind puisse importer et utiliser les classes de Phoenix UI CSS:

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',

+    // Allows Phoenix.UI css to be processed by JIT compiler.
+    "../deps/phoenix_ui/**/*.*ex",
  ],
  darkMode: "class",
  plugins: [
+    // Allows form error styling
+    plugin(({ addVariant }) =>
+      addVariant("invalid", ".invalid:not(.phx-no-feedback) &")
+    ),
  ],
  theme: {
    extend: {},
  },
};

4. Importer des composants de l'interface utilisateur de Phoenix

Il existe plusieurs façons d'importer des composants. Nous vous recommandons d'importer des composants dans votre application {app}_web.ex view_helpers Fonction:

  ...

  defp view_helpers do
    quote do
      ...

      # Phoenix.UI macro which imports all components and JS interactions
      use Phoenix.UI
      # Or import components individually
      import Phoenix.UI.Components . { Button , Tooltip , ... }

      ...
    end
  end