phoenix_components

phoenix_components

Diese Bibliothek hilft Ihnen beim Schreiben eingekapselter HTML -Bits in eine einzelne Einheit namens Komponente auf Ihrer von Server gerenderten Phoenix -Website. Ähnlich wie React/Ember/Web -Komponenten.

Inhaltstabelle

• Zusammenfassung
• Installation
• Schneller Start
• Konfiguration
• Lizenz

Zusammenfassung

Sie können eine neue Komponente mit dem eingebauten Generator generieren

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

Dann können Sie die neue Komponente in einer Vorlage verwenden

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

Mit der entsprechenden Komponentendefinition

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

Fügen Sie Ihren mix.exs -DEPS phoenix_components hinzu:

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

Und dann müssen Sie Ihrer Konfigurationsdatei eine Konfiguration hinzufügen

 config :phoenix_components , app_name: MyApp

Wo MyApp das Modul ist, das Ihre Phoenix -App darstellt.

Zusätzlicher Schritt für Elixir 1.3 und niedriger

Wenn Sie Elixir 1.3 oder niedriger ausführen, vergessen Sie nicht, es unter Ihre Anwendungsliste in mix.exs hinzuzufügen

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

Schneller Start

Dies ist ein kurzer Überblick darüber, wie Sie eine Komponente in Ihrer Anwendung erstellen und verwenden.

1. Importieren von PhoenixComponents.View in allen Anwendungsansichten

Nach der Installation der Abhängigkeit müssen Sie Ihre Anwendung konfigurieren.

Sie können dies tun, indem Sie diese Zeile zu Ihrer web/web.ex -Datei hinzufügen

Suchen Sie nach der Zeile def view do und aktualisieren Sie sie, um diese Zeile einzuschließen

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

2. Erstellen einer button

Phoenix -Komponenten werden durch zwei verschiedene Teile definiert, eine Ansicht und eine Vorlage. Die Ansicht enthält Helferfunktionen und die Vorlage enthält die HTML.

Um eine Schaltflächenkomponente zu web/components/button/view.ex

 defmodule MyApp.Components.Button do
  use PhoenixComponents.Component

  def classes do
    "btn btn-default"
  end
end

Erstellen Sie dann die Vorlagendatei web/components/button/template.html.eex mit dem folgenden Inhalt

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

Beachten Sie, dass @content -Variable den im Schaltflächenblock definierten Inhalt enthält. Der nächste Abschnitt zeigt dies ausführlicher.

3.. Verwenden der Komponente

Sie können die Komponente aus jeder Vorlage mithilfe der Helfer component verwenden.

In jeder Vorlage fügen Sie die Schaltflächenkomponente web/templates/pages/show.html.eex .

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

Der Inhalt im Komponentenblock wird als @content -Variable an die Komponente übergeben.

4. Importieren von Komponenten in Ansichten

Sie können die Komponenten in jeder Ansicht importieren, indem Sie die Funktion import_components verwenden. Auf diese Weise können Sie vermeiden, component anzurufen und stattdessen den Namen der Komponente zu verwenden.

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

Dann können Sie diese Helfer aus Ihren Vorlagen verwenden

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

5. Verwenden von Attributen in Ihren Komponenten

Wenn Sie eine Komponente aufrufen, können Sie jedes Attribut übergeben, das Ihnen gefällt.

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

In der Vorlage der Komponente werden diese Attribute in der @attrs -Karte verfügbar sein.

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

Konfiguration

Sie können konfigurieren, wo die Komponenten durch Bearbeiten Ihrer Anwendungskonfigurationsdatei config/config.exs eingestellt werden sollen.

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

Komponenten werden standardmäßig von web erhalten.

Gesundheit des Projekts

Lizenz

Phoenix_Components ist unter der MIT -Lizenz lizenziert.

Siehe Lizenz für den vollständigen Lizenztext.