phoenix_ui

Phoenix UI

Nota (2024-11-22): He estado fuera del ecosistema de elixir durante más de un año. Sin embargo, recientemente regresé y al volver a visitar esta biblioteca, decidí cambiar el alcance de este proyecto OSS. Las actualizaciones futuras adoptarán un modelo similar a ui.shadcdn.com, centrándose en componentes diseñados para una fácil integración de copias y pastas en sus aplicaciones.

Una biblioteca de interfaz de usuario de cortesía para Phoenix Framework y Phoenix LiveView.

Instalación

Phoenix UI depende de Phoenix 1.6. Antes de continuar, asegúrese de haber actualizado su aplicación existente a 1.6 o la aplicación que ha generado está usando 1.6.

1. Instale CSS de viento de cola con Phoenix

Siga la guía oficial para configurar CSS de viento de cola en un proyecto Phoenix.

2. Instale la interfaz de usuario de Phoenix

Disponible en Hex, el paquete se puede instalar agregando phoenix_ui a su lista de dependencias en mix.exs:

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

La documentación se puede encontrar en https://hexdocs.pm/phoenix_ui.

3. Configure CSS de Vailín para importar clases de UI de Phoenix

Agregue un nuevo patrón de ruta a assets/tailwind.config.js para que Tailwind pueda importar y utilizar clases de 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 de UI de Phoenix

Hay múltiples formas de importar componentes. Recomendamos importar componentes en su aplicación {app}_web.ex view_helpers Función:

  ...

  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