phoenix_ui

Phoenix UI

Catatan (2024-11-22): Saya sudah keluar dari ekosistem elixir selama lebih dari setahun. Namun, saya baru -baru ini kembali dan setelah meninjau kembali perpustakaan ini, saya telah memutuskan untuk menggeser ruang lingkup proyek OSS ini. Pembaruan di masa depan akan mengadopsi model yang mirip dengan UI.Shadcdn.com, yang berfokus pada komponen yang dirancang untuk integrasi copy-and-paste yang mudah ke dalam aplikasi Anda.

Perpustakaan UI gratis untuk Kerangka Phoenix dan Phoenix Liveview.

Instalasi

Phoenix UI tergantung pada Phoenix 1.6. Sebelum melanjutkan, pastikan Anda telah meningkatkan aplikasi Anda yang ada ke 1.6 atau aplikasi yang Anda hasilkan menggunakan 1.6.

1. Pasang CSS Tailwind dengan Phoenix

Ikuti panduan resmi untuk menyiapkan CSS Tailwind dalam proyek Phoenix.

2. Instal Phoenix UI

Tersedia dalam hex, paket dapat diinstal dengan menambahkan phoenix_ui ke daftar dependensi Anda di Mix.exs:

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

Dokumentasi dapat ditemukan di https://hexdocs.pm/phoenix_ui.

3. Konfigurasikan CSS Tailwind untuk Mengimpor Kelas Phoenix UI

Tambahkan pola jalur baru ke assets/tailwind.config.js So Tailwind dapat mengimpor dan memanfaatkan kelas 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. Impor komponen UI Phoenix

Ada beberapa cara untuk mengimpor komponen. Kami merekomendasikan mengimpor komponen di aplikasi Anda {app}_web.ex view_helpers fungsi:

  ...

  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