phoenix_components

phoenix_components

이 라이브러리를 사용하면 캡슐화 된 HTML 비트를 서버 렌더링 된 Phoenix 웹 사이트의 구성 요소라는 단일 장치로 작성하는 데 도움이됩니다. React/Ember/Web 구성 요소의 방식과 유사합니다.

내용 테이블

• 개요
• 설치
• 빠른 시작
• 구성
• 특허

개요

내장 생성기로 새 구성 요소를 생성 할 수 있습니다.

 $ 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 >

설치

mix.exs 에 phoenix_components 추가하십시오. 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 가져 오기 모든 응용 프로그램보기에서 뷰

종속성을 설치 한 후에는 응용 프로그램을 구성해야합니다.

이 라인을 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 구성 요소 생성

피닉스 구성 요소는 뷰와 템플릿의 두 가지 부분으로 정의됩니다. 보기에는 도우미 기능이 포함되어 있고 템플릿에는 HTML이 포함되어 있습니다.

버튼 구성 요소를 만들려면 다음 내용으로보기 파일 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 사용하여 템플릿의 구성 요소를 사용할 수 있습니다.

모든 템플릿에서 예를 들어 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 라이센스에 따라 라이센스가 부여됩니다.

정식 라이센스 텍스트는 라이센스를 참조하십시오.