phoenix_components

Phoenix_Components

Esta biblioteca ajuda a escrever bits de HTML encapsulados em uma única unidade chamada componente no seu servidor renderizado pelo site da Phoenix. Semelhante a como os componentes React/Ember/Web o fazem.

Tabela de conteúdo

• Sinopse
• Instalação
• Início rápido
• Configuração
• Licença

Sinopse

Você pode gerar um novo componente com o gerador embutido

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

Então você pode usar o novo componente em um modelo

 # /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 % >

Com a definição de componente correspondente

 # /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 >

Instalação

Adicione phoenix_components ao seu mix.exs Deps:

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

E então você deve adicionar uma configuração ao seu arquivo de configuração

 config :phoenix_components , app_name: MyApp

Onde MyApp é o módulo que representa seu aplicativo Phoenix.

Etapa extra para o elixir 1.3 e inferior

Se você estiver executando o elixir 1.3 ou inferior, não se esqueça de adicioná -lo na lista de aplicativos no mix.exs

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

Início rápido

Esta é uma visão geral rápida de como criar e usar um componente em seu aplicativo.

1. Importar PhoenixComponents.View em todas as visualizações de aplicativos

Depois de instalar a dependência, você precisa configurar seu aplicativo.

Você pode fazer isso adicionando esta linha ao seu arquivo web/web.ex

Procure a linha def view do linha e atualize -a para incluir esta linha

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

2. Criando um componente button

Os componentes do Phoenix são definidos por duas partes diferentes, uma visualização e um modelo. A visualização contém funções auxiliares e o modelo contém o HTML.

Para criar um componente de botão, você precisa criar o arquivo de visualização web/components/button/view.ex com o seguinte conteúdo

 defmodule MyApp.Components.Button do
  use PhoenixComponents.Component

  def classes do
    "btn btn-default"
  end
end

Em seguida, crie o arquivo de modelos web/components/button/template.html.eex com o seguinte conteúdo

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

Observe que a variável @content conterá o conteúdo definido dentro do bloco de botões. A próxima seção mostra isso com mais detalhes.

3. Usando o componente

Você pode usar o componente de qualquer modelo usando o component da função auxiliar.

Em qualquer modelo, por exemplo, web/templates/pages/show.html.eex Adicione o componente do botão.

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

O conteúdo dentro do bloco de componentes é passado para o componente como a variável @content .

4. Importando componentes para vistas

Você pode importar os componentes em qualquer visualização usando a função import_components . Isso permite que você evite chamar component ajudante e, em vez disso, use o nome do componente.

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

Então você pode usar esses ajudantes de seus modelos

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

5. Usando atributos dentro de seus componentes

Ao chamar um componente, você pode passar qualquer atributo que desejar.

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

Dentro do modelo do componente, esses atributos estarão disponíveis no mapa @attrs .

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

Configuração

Você pode configurar onde colocar os componentes editando o arquivo de configuração do aplicativo config/config.exs .

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

Os componentes são obtidos da web por padrão.

Saúde do projeto

Licença

Phoenix_Components está licenciado sob a licença do MIT.

Consulte a licença para o texto completo da licença.