phoenix_components

phoenix_components

Cette bibliothèque vous aide à écrire des bits encapsulés de HTML dans une seule unité appelée composante du site Web Phoenix rendu de votre serveur. Semblable à la façon dont les composants React / Ember / Web font.

Tableau de contenu

• Synopsis
• Installation
• Démarrage rapide
• Configuration
• Licence

Synopsis

Vous pouvez générer un nouveau composant avec le générateur intégré

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

Alors vous pouvez utiliser le nouveau composant dans un modèle

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

Avec la définition de composante correspondante

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

Installation

Ajoutez phoenix_components à votre mix.exs DEPS:

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

Et puis vous devez ajouter une configuration à votre fichier de configuration

 config :phoenix_components , app_name: MyApp

où MyApp est le module qui représente votre application Phoenix.

Étape supplémentaire pour Elixir 1.3 et inférieur

Si vous exécutez Elixir 1.3 ou moins, n'oubliez pas de l'ajouter dans votre liste d'applications dans Mix.exs

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

Démarrage rapide

Ceci est un aperçu rapide de la façon de créer et d'utiliser un composant dans votre application.

1. Importation de phoenixComponents.View dans toutes les vues de l'application

Après avoir installé la dépendance, vous avez besoin pour configurer votre application.

Vous pouvez le faire en ajoutant cette ligne à votre fichier web/web.ex

Recherchez la def view do et mettez-la à la mise à jour pour inclure cette ligne

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

2. Création d'un composant button

Les composants Phoenix sont définis par deux parties différentes, une vue et un modèle. La vue contient des fonctions d'assistance et le modèle contient le HTML.

Pour créer un composant de bouton, vous devez créer le fichier Affichage web/components/button/view.ex avec le contenu suivant

 defmodule MyApp.Components.Button do
  use PhoenixComponents.Component

  def classes do
    "btn btn-default"
  end
end

Créez ensuite le fichier de modèle web/components/button/template.html.eex avec le contenu suivant

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

Notez que la variable @content contiendra le contenu défini dans le bloc de bouton. La section suivante le montre plus en détail.

3. Utilisation du composant

Vous pouvez utiliser le composant à partir de n'importe quel modèle en utilisant le component de la fonction d'assistance.

Dans n'importe quel modèle, par exemple web/templates/pages/show.html.eex Ajoutez le composant du bouton.

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

Le contenu à l'intérieur du bloc de composant est passé au composant en tant que variable @content .

4. Importation de composants en vues

Vous pouvez importer les composants dans n'importe quelle vue en utilisant la fonction import_components . Cela vous permet d'éviter d'avoir à appeler Helper component et d'utiliser simplement le nom du composant.

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

Ensuite, vous pouvez utiliser ces aides à partir de vos modèles

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

5. Utilisation d'attributs à l'intérieur de vos composants

Lorsque vous appelez un composant, vous pouvez transmettre n'importe quel attribut que vous aimez.

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

À l'intérieur du modèle du composant, ces attributs seront disponibles sur la carte @attrs .

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

Configuration

Vous pouvez configurer où mettre les composants en modifiant le fichier de configuration de votre application config/config.exs .

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

Les composants sont obtenus sur web par défaut.

Santé du projet

Licence

Phoenix_Components est concédé sous licence MIT.

Voir la licence pour le texte complet de licence.