phoenix_components

Phoenix_Components

Esta biblioteca le ayuda a escribir bits encapsulados de HTML en una sola unidad llamada Componente en su servidor Rendered Phoenix Web Site. Similar a cómo lo hacen los componentes react/Ember/web.

Tabla de contenido

• Sinopsis
• Instalación
• Comienzo rápido
• Configuración
• Licencia

Sinopsis

Puede generar un nuevo componente con el generador incorporado

 $ mix phoenix.gen.component button
* creating web/components/button/view.ex
* creating web/components/button/template.html.eex
* creating test/components/button_test.exs

Entonces puede usar el nuevo componente en una plantilla

 # /web/views/page_view.ex
defmodule MyApp.PageView do
  use MyApp.Web , :view
  use PhoenixComponents.View

  import_components [ :button ]
end 

# /web/templates/page/show.html.eex

<%= button type: :primary do % >
  My cool button!
<% end % >

Con la definición de componente correspondiente

 # /web/components/button/view.ex
defmodule MyApp.Components.ButtonView do
  use PhoenixComponents.Component

  def class_for_type ( type ) do
    "btn btn--" <> to_string ( type )
  end
end 

# /web/components/button/template.html.eex
< button class = " <%= class_for_type @attrs.type %> " >
  <%= @content % >
</ button >

Instalación

Agregue phoenix_components a su mix.exs DEPS:

 def deps do
  [ { :phoenix_components , "~> 1.0.0" } ]
end

y luego debe agregar una configuración a su archivo de configuración

 config :phoenix_components , app_name: MyApp

Donde MyApp es el módulo que representa su aplicación Phoenix.

Paso adicional para Elixir 1.3 y más bajo

Si está ejecutando Elixir 1.3 o más bajo, no olvide agregarlo en su lista de aplicaciones en mix.exs

 def application do
  [ applications: [ :phoenix_components ] ]
end 

Comienzo rápido

Esta es una visión general rápida de cómo crear y usar un componente en su aplicación.

1. Importar PhoenixComponents.view en todas las vistas de la aplicación

Después de instalar la dependencia, necesita configurar su aplicación.

Puede hacer esto agregando esta línea a su archivo web/web.ex

Busque la línea def view do y actualice para incluir esta línea

 def view do
  quote do
    use Phoenix.View , root: "web/templates"
    use PhoenixComponents.View # Add this line
    ...

2. Creación de un componente button

Los componentes de Phoenix se definen por dos partes diferentes, una vista y una plantilla. La vista contiene funciones auxiliares y la plantilla contiene el HTML.

Para crear un componente de botón, debe crear el archivo web/components/button/view.ex ver el archivo con el siguiente contenido

 defmodule MyApp.Components.Button do
  use PhoenixComponents.Component

  def classes do
    "btn btn-default"
  end
end

Luego cree el archivo de plantilla web/components/button/template.html.eex con el siguiente contenido

< button class = " <%= classes %> " >
  <%= @content % >
</ button >

Tenga en cuenta que la variable @content contendrá el contenido definido dentro del bloque de botones. La siguiente sección muestra esto con más detalle.

3. Usando el componente

Puede usar el componente de cualquier plantilla utilizando el component de la función ayudante.

En cualquier plantilla, por ejemplo web/templates/pages/show.html.eex Agregue el componente del botón.

 <%= component :button do % >
  My cool button!
<% end % >

El contenido dentro del bloque de componentes se pasa al componente como la variable @content .

4. Importar componentes en vistas

Puede importar los componentes en cualquier visión utilizando la función import_components . Esto le permite evitar tener que llamar a component auxiliares y, en su lugar, solo usar el nombre del componente.

defmodule MyApp.PageView do
  use Phoenix.Web, :view
  import_components [:button, :jumbotron]
end

Entonces puedes usar estos ayudantes de tus plantillas

 <%= button type: :submit do % >
  Submit form!
<% end % >

5. Uso de atributos dentro de sus componentes

Al llamar a un componente, puede pasar cualquier atributo que desee.

 <%= button type: :submit do % >
  Submit form!
<% end % >

Dentro de la plantilla del componente, estos atributos estarán disponibles en el mapa @attrs .

< button type = " <%= @attrs.type %> " >
  <%= @content % >
</ button >

Configuración

Puede configurar dónde colocar los componentes editando el archivo de configuración de la aplicación config/config.exs .

 config :phoenix_components , path: "lib/foo/bar"

Los componentes se obtienen de web de forma predeterminada.

Salud del proyecto

Licencia

Phoenix_Components tiene licencia bajo la licencia MIT.

Vea la licencia para el texto completo de la licencia.