phoenix_ui

فينيكس واجهة المستخدم

ملاحظة (2024-11-22): لقد خرجت من النظام البيئي Elixir لأكثر من عام. ومع ذلك ، فقد عدت مؤخرًا وعند إعادة النظر في هذه المكتبة ، قررت تغيير نطاق مشروع OSS هذا. ستعتمد التحديثات المستقبلية نموذجًا مشابهًا لـ ui.shadcdn.com ، مع التركيز على المكونات المصممة لتكامل نسخ ولصق سهلة في تطبيقاتك.

مكتبة واجهة المستخدم مجانية لإطار فينيكس و Phoenix LiveView.

تثبيت

يعتمد Phoenix UI على Phoenix 1.6. قبل المتابعة ، يرجى التأكد من ترقية تطبيقك الحالي إلى 1.6 أو التطبيق الذي أنشأته هو استخدام 1.6.

1. تثبيت CSS Tailwind مع Phoenix

اتبع الدليل الرسمي لإعداد CSS Tailwind في مشروع Phoenix.

2. تثبيت فينيكس واجهة المستخدم

متوفر في Hex ، يمكن تثبيت الحزمة عن طريق إضافة Phoenix_UI إلى قائمة التبعيات الخاصة بك في mix.exs:

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

يمكن العثور على الوثائق على https://hexdocs.pm/phoenix_ui.

3. تكوين CSS Tailwind لاستيراد فئات واجهة المستخدم فينيكس

أضف نمط مسار جديد إلى assets/tailwind.config.js حتى يتمكن Windwind من استيراد فئات 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. استيراد مكونات واجهة المستخدم فينيكس

هناك طرق متعددة لاستيراد المكونات. نوصي باستيراد مكونات في التطبيق الخاص بك {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