phoenix_ui

Phoenix UI

Nota (2024-11-22): Estou fora do ecossistema Elixir há mais de um ano. No entanto, voltei recentemente e, ao revisar esta biblioteca, decidi mudar o escopo deste projeto OSS. As atualizações futuras adotarão um modelo semelhante ao UI.shadcdn.com, concentrando-se em componentes projetados para facilitar a integração de cópia e cola em seus aplicativos.

Uma biblioteca de interface do usuário gratuita para a estrutura de Phoenix e Phoenix LiveView.

Instalação

A UI de Phoenix depende da Phoenix 1.6. Antes de prosseguir, verifique se você atualizou seu aplicativo existente para 1.6 ou o aplicativo que você gerou está usando 1.6.

1. Instale o Tailwind CSS com Phoenix

Siga o guia oficial para a criação de CSS do Tailwind em um projeto Phoenix.

2. Instale a interface do usuário do Phoenix

Disponível em hexadecimal, o pacote pode ser instalado adicionando Phoenix_ui à sua lista de dependências no mix.exs:

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

A documentação pode ser encontrada em https://hexdocs.pm/phoenix_ui.

3. Configure CSS do Tailwind para importar aulas de interface do usuário do Phoenix

Adicione um novo padrão de caminho aos assets/tailwind.config.js para que o Tailwind possa importar e utilizar as classes 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. Importar componentes da interface do usuário da Phoenix

Existem várias maneiras de importar componentes. Recomendamos a importação de componentes em seu aplicativo {app}_web.ex view_helpers função:

  ...

  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