phoenix_ui

Phoenix UI

HINWEIS (2024-11-22): Ich bin seit weit über einem Jahr aus dem Elixir-Ökosystem. Ich bin jedoch kürzlich zurückgekehrt und habe diese Bibliothek erneut besucht, und habe mich entschlossen, den Umfang dieses OSS -Projekts zu verlagern. Zukünftige Updates werden ein ähnliches Modell wie ui.shadcdn.com übernehmen, das sich auf Komponenten konzentriert, die für die einfache Integration von Kopien und Einteilen in Ihre Apps entwickelt wurden.

Eine kostenlose UI -Bibliothek für das Phoenix Framework und Phoenix Liveview.

Installation

Phoenix UI hängt von Phoenix 1.6 ab. Bitte stellen Sie vor dem Fahren sicher, dass Sie Ihre vorhandene App auf 1.6 aktualisieren, oder die von Ihnen generierte App verwendet 1.6.

1. Installieren Sie den Rückenblasen -CSS mit Phoenix

Folgen Sie dem offiziellen Leitfaden zum Einrichten von Rückenwind -CSS in einem Phoenix -Projekt.

2. Installieren Sie die UI der Phoenix

Das Paket ist in Hex erhältlich und kann durch Hinzufügen von Phoenix_Ui zu Ihrer Liste der Abhängigkeiten in mix.exs installiert werden:

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

Die Dokumentation finden Sie unter https://hexdocs.pm/phoenix_ui.

3. Konfigurieren Sie das CSS von Tailwind, um Phoenix UI -Klassen zu importieren

Fügen Sie assets/tailwind.config.js ein neues Pfadmuster hinzu, sodass Tailwind Phoenix UI CSS -Klassen importieren und verwenden kann:

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. Importieren Sie Phoenix UI -Komponenten

Es gibt mehrere Möglichkeiten, Komponenten zu importieren. Wir empfehlen beim Importieren von Komponenten in Ihrer Anwendung {app}_web.ex view_helpers -Funktion:

  ...

  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