phoenix_components

phoenix_components

Perpustakaan ini membantu Anda menulis bit HTML yang dienkapsulasi ke dalam satu unit yang disebut komponen di server Anda yang diberikan situs web Phoenix. Mirip dengan bagaimana komponen React/Ember/Web melakukannya.

Tabel konten

• Ringkasan
• Instalasi
• Awal yang cepat
• Konfigurasi
• Lisensi

Ringkasan

Anda dapat menghasilkan komponen baru dengan generator bawaan

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

Maka Anda dapat menggunakan komponen baru dalam templat

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

Dengan definisi komponen yang sesuai

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

Instalasi

Tambahkan phoenix_components ke DEP mix.exs Anda:

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

dan kemudian Anda harus menambahkan satu konfigurasi ke file konfigurasi Anda

 config :phoenix_components , app_name: MyApp

Di mana MyApp adalah modul yang mewakili aplikasi Phoenix Anda.

Langkah ekstra untuk Elixir 1.3 dan lebih rendah

Jika Anda menjalankan Elixir 1.3 atau lebih rendah, jangan lupa menambahkannya di bawah daftar aplikasi Anda di Mix.exs

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

Awal yang cepat

Ini adalah gambaran cepat tentang cara membuat dan menggunakan komponen di aplikasi Anda.

1. Mengimpor phoenixcomponents.view di semua tampilan aplikasi

Setelah menginstal ketergantungan, Anda perlu mengkonfigurasi aplikasi Anda.

Anda dapat melakukan ini dengan menambahkan baris ini ke file web/web.ex Anda

Cari def view do dan perbarui untuk memasukkan baris ini

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

2. Membuat komponen button

Komponen Phoenix ditentukan oleh dua bagian yang berbeda, tampilan dan templat. Tampilan berisi fungsi pembantu dan templat berisi HTML.

Untuk membuat komponen tombol, Anda perlu membuat file tampilan web/components/button/view.ex dengan konten berikut

 defmodule MyApp.Components.Button do
  use PhoenixComponents.Component

  def classes do
    "btn btn-default"
  end
end

Kemudian buat file template web/components/button/template.html.eex dengan konten berikut

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

Perhatikan bahwa variabel @content akan berisi konten yang ditentukan di dalam blok tombol. Bagian selanjutnya menunjukkan ini secara lebih rinci.

3. Menggunakan komponen

Anda dapat menggunakan komponen dari templat apa pun dengan menggunakan component fungsi helper.

Dalam templat apa pun, misalnya web/templates/pages/show.html.eex Tambahkan komponen tombol.

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

Konten di dalam blok komponen diteruskan ke komponen sebagai variabel @content .

4. Mengimpor komponen ke tampilan

Anda dapat mengimpor komponen dalam tampilan apa pun dengan menggunakan fungsi import_components . Ini memungkinkan Anda untuk menghindari harus memanggil penolong component dan sebagai gantinya hanya menggunakan nama komponen.

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

Maka Anda dapat menggunakan pembantu ini dari templat Anda

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

5. Menggunakan atribut di dalam komponen Anda

Saat memanggil komponen, Anda dapat melewati atribut apa pun yang Anda sukai.

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

Di dalam template komponen, atribut ini akan tersedia di peta @attrs .

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

Konfigurasi

Anda dapat mengonfigurasi tempat untuk meletakkan komponen dengan mengedit file konfigurasi aplikasi Anda config/config.exs .

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

Komponen diperoleh dari web secara default.

Kesehatan proyek

Lisensi

Phoenix_Components dilisensikan di bawah lisensi MIT.

Lihat lisensi untuk teks lisensi lengkap.