phoenix_ui

Phoenix UI

注意（2024-11-22）：一年多来，我已经离开了Elixir生态系统了。但是，我最近返回并重新审视了该图书馆后，我决定改变此OSS项目的范围。未来的更新将采用类似于UI.shadcdn.com的模型，该模型重点介绍了旨在轻松地集成到您的应用程序中的组件。

Phoenix框架和Phoenix Liveview的免费UI库。

安装

凤凰UI取决于凤凰1.6。在继续之前，请确保您已将现有应用程序升级到1.6，或者您生成的应用程序使用的是1.6。

1。用凤凰安装尾风CSS

遵循官方指南，以在凤凰项目中设置逆风CSS。

2。安装Phoenix UI

可以在十六进制中提供该软件包，可以通过将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中添加新的路径模式，以便尾风可以导入并利用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 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