phoenix_ui

ฟีนิกซ์ UI

หมายเหตุ (2024-11-22): ฉันออกจากระบบนิเวศ Elixir มานานกว่าหนึ่งปีแล้ว อย่างไรก็ตามฉันเพิ่งกลับมาและกลับมาเยี่ยมชมห้องสมุดนี้ฉันตัดสินใจเปลี่ยนขอบเขตของโครงการ OSS นี้ การอัปเดตในอนาคตจะนำรูปแบบที่คล้ายกับ ui.shadcdn.com โดยมุ่งเน้นไปที่ส่วนประกอบที่ออกแบบมาสำหรับการรวมการคัดลอกและวางอย่างง่ายดายลงในแอพของคุณ

ห้องสมุด UI ฟรีสำหรับเฟรมเวิร์กฟีนิกซ์และฟีนิกซ์ Liveview

การติดตั้ง

ฟีนิกซ์ UI ขึ้นอยู่กับฟีนิกซ์ 1.6 ก่อนดำเนินการโปรดตรวจสอบให้แน่ใจว่าคุณได้อัปเกรดแอพที่มีอยู่เป็น 1.6 หรือแอพที่คุณสร้างขึ้นนั้นใช้ 1.6

1. ติดตั้ง Tailwind CSS กับ Phoenix

ทำตามคำแนะนำอย่างเป็นทางการสำหรับการตั้งค่า CSS tailwind ในโครงการฟีนิกซ์

2. ติดตั้ง Phoenix UI

มีให้ใน HEX แพ็คเกจสามารถติดตั้งได้โดยการเพิ่ม Phoenix_UI ในรายการการอ้างอิงของคุณใน Mix.exs:

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

เอกสารสามารถดูได้ที่ https://hexdocs.pm/phoenix_ui

3. กำหนดค่า tailwind CSS เพื่อนำเข้าคลาส Phoenix UI

เพิ่มรูปแบบเส้นทางใหม่ให้กับ assets/tailwind.config.js เพื่อให้ Tailwind สามารถนำเข้าและใช้ประโยชน์จากคลาส 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. นำเข้าส่วนประกอบ UI ของฟีนิกซ์

มีหลายวิธีในการนำเข้าส่วนประกอบ เราขอแนะนำการนำเข้าส่วนประกอบในแอปพลิเคชันของคุณ {app}_web.ex view_helpers ฟังก์ชัน:

  ...

  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