phoenix_components

phoenix_components

Эта библиотека поможет вам записать инкапсулированные биты HTML в один модуль, называемый компонентом на вашем сервере, визуализированном веб -сайту Phoenix. Похоже на то, как это делают React/Ember/Web Components.

Таблица контента

• Синопсис
• Установка
• Быстрый старт
• Конфигурация
• Лицензия

Синопсис

Вы можете генерировать новый компонент со встроенным генератором

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

Затем вы можете использовать новый компонент в шаблоне

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

С соответствующим определением компонента

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

Установка

Добавьте phoenix_components в свой mix.exs deps:

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

И тогда вам нужно добавить одну конфигурацию в свой файл конфигурации

 config :phoenix_components , app_name: MyApp

где MyApp - модуль, который представляет ваше приложение Phoenix.

Дополнительный шаг для Elixir 1.3 и ниже

Если вы используете Elixir 1.3 или ниже, не забудьте добавить его в список приложений в Mix.exs

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

Быстрый старт

Это краткий обзор того, как создать и использовать компонент в вашем приложении.

1. Импорт phoenixcomponents.view во всех представлениях приложений

После установки зависимости вам необходимо настроить приложение.

Вы можете сделать это, добавив эту строку в свой файл web/web.ex

Ищите линию def view do и обновите его, чтобы включить эту строку

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

2. Создание компонента button

Компоненты Phoenix определяются двумя разными частями, представлением и шаблоном. Представление содержит вспомогательные функции, а шаблон содержит HTML.

Чтобы создать компонент кнопки, вам необходимо создать файл View web/components/button/view.ex с следующим контентом

 defmodule MyApp.Components.Button do
  use PhoenixComponents.Component

  def classes do
    "btn btn-default"
  end
end

Затем создайте шаблон файл web/components/button/template.html.eex со следующим содержанием

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

Обратите внимание, что переменная @content будет содержать содержимое, определенное внутри блока кнопки. Следующий раздел показывает это более подробно.

3. Использование компонента

Вы можете использовать компонент из любого шаблона, используя функциональную component Helper.

В любом шаблоне, например, web/templates/pages/show.html.eex Добавьте компонент кнопки.

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

Содержание внутри блока компонентов передается в компонент в качестве переменной @content .

4. Импорт компонентов в представления

Вы можете импортировать компоненты в любом представлении, используя функцию import_components . Это позволяет вам избежать необходимости вызовать помощника component и вместо этого просто использовать имя компонента.

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

Тогда вы можете использовать этих помощников из своих шаблонов

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

5. Использование атрибутов внутри ваших компонентов

При вызове компонента вы можете передать любой атрибут, который вам нравится.

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

Внутри шаблона компонента эти атрибуты будут доступны на карте @attrs .

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

Конфигурация

Вы можете настроить, где разместить компоненты, редактируя файл конфигурации приложения config/config.exs .

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

Компоненты получаются из web по умолчанию.

Здоровье проекта

Лицензия

Phoenix_components лицензируется по лицензии MIT.

Смотрите лицензию для полной лицензии.