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 >

تثبيت

أضف phoenix_components إلى DEPS mix.exs :

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

ثم عليك إضافة تكوين واحد إلى ملف التكوين الخاص بك

 config :phoenix_components , app_name: MyApp

حيث MyApp هي الوحدة النمطية التي تمثل تطبيق Phoenix الخاص بك.

خطوة إضافية لـ Elixir 1.3 و Lower

إذا كنت تقوم بتشغيل 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.

لإنشاء مكون زر ، تحتاج إلى إنشاء ملف 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 مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.

انظر ترخيص نص الترخيص الكامل.