phoenix_ui

Phoenix UI

ПРИМЕЧАНИЕ (2024-11-22): я был вне экосистемы Эликсира более года. Тем не менее, я недавно вернулся, и после пересмотра этой библиотеки я решил изменить объем этого проекта OSS. Будущие обновления примут модель, аналогичную UI.Shadcdn.com, сосредоточившись на компонентах, предназначенных для легкой интеграции копирования и вставки в ваши приложения.

Бесплатная библиотека пользовательского интерфейса для феникс -фреймворка и Phoenix LiveView.

Установка

Phoenix UI зависит от Phoenix 1.6. Прежде чем продолжить, убедитесь, что вы либо обновили свое существующее приложение до 1.6, либо генерируемое вами приложение использует 1.6.

1. Установите CSS Tailwind с Phoenix

Следуйте официальному руководству по настройке CSS Taillid в проекте Phoenix.

2. Установите пользовательский интерфейс Phoenix

Доступен в HEX, пакет может быть установлен, добавив Phoenix_ui в ваш список зависимостей в mix.exs:

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

Документация можно найти по адресу https://hexdocs.pm/phoenix_ui.

3. Настройте Tailwind CSS для импорта классов пользовательского интерфейса Phoenix

Добавьте новый шаблон пути в assets/tailwind.config.js SO 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. Импорт компонентов пользовательского интерфейса Phoenix

Есть несколько способов импорта компонентов. Мы рекомендуем импортировать компоненты в вашем приложении {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