الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

bootstrap_form

bootstrap_form هو منشئ نماذج Rails الذي يجعل من السهل جدًا دمج نماذج نمط Bootstrap v5 في تطبيق Rails الخاص بك. يوفر مساعدين للنموذج يزيدون من مساعدي نموذج Rails. يقوم مساعدو النموذج bootstrap_forms بإنشاء حقل النموذج والتسمية الخاصة به وجميع علامات Bootstrap المطلوبة لعرض Bootstrap المناسب. يوفر bootstrap_form أيضًا ما يلي:

  • رسائل خطأ التحقق من الصحة أسفل الحقل الذي تتوافق معه، بشكل افتراضي. يمكنك أيضًا وضع رسائل الخطأ بعد التصنيف، أو إيقاف تشغيل معالجة أخطاء التحقق من صحة bootstrap_form والقيام بذلك بنفسك. لاحظ أن هذا ينطبق على رسائل التحقق التي تم إنشاؤها بواسطة Rails. لا يعمل التحقق من جانب العميل في HTML 5 والتحقق من صحة Rails بشكل جيد معًا. مناقشة واحدة للتحديات وبعض الحلول هنا
  • الترميز التلقائي للسمة required في الحقول المطلوبة.
  • طريقة سهلة لعرض نص التعليمات بشكل متسق في الحقول.
  • ترميز نماذج Bootstrap الأفقية (التسميات الموجودة على يسار حقولها، مثل تطبيق سطح المكتب التقليدي)، إذا كان هذا هو ما تريده.
  • العديد من الخيارات لتعديل أو زيادة الترميز الناتج.
  • طريقة للهروب إلى مساعدي نموذج Rails إذا كنت بحاجة إلى القيام بشيء لا يستطيع bootstrap_form القيام به.

بعض الأشياء الرائعة الأخرى التي يقدمها bootstrap_form لك هي:

  • يقلل من كمية التعليمات البرمجية في ملفات .erb الخاصة بك.
  • يجعلك تسير بشكل أسرع مع Bootstrap، لأنك لا تحتاج إلى تعلم جميع قواعد ترميز نموذج Bootstrap للبدء.
  • يقلل من الأخطاء، لأنك تقوم بكتابة أقل.
  • يجعل من السهل رؤية منطق النموذج، لأنه غير مختلط مع ترميز Bootstrap.

يعمل bootstrap_form مثل مساعدي نموذج Rails القياسيين، ويفترض هذا الملف README أنك تعرف كيفية عملهم. يمكنك بدء نموذج باستخدام أحد bootstrap_form_with أو bootstrap_form_for أو bootstrap_form_tag في ملف عرض. يمكنك الحصول على أداة إنشاء النماذج التي تستدعي مساعدي bootstrap_form بدلاً من مساعدي Rails القياسيين. يمكنك استخدام منشئ النماذج هذا في ملف العرض لعرض واحد أو أكثر من حقول النموذج.

متطلبات

يدعم bootstrap_form على الأقل الإصدارات المدعومة حاليًا من Ruby و Rails:

  • روبي 3.0+ (https://www.ruby-lang.org/en/downloads/branches/)
  • ريلز 6.1+ (https://guides.rubyonrails.org/maintenance_policy.html)
  • بوتستراب 5.0+

تثبيت

قم بتثبيت Bootstrap 5. هناك العديد من الطرق للقيام بذلك، اعتمادًا على مسار الأصول الذي تستخدمه في تطبيق Rails الخاص بك. إحدى الطرق هي استخدام الجوهرة التي تعمل مع Sprockets. للقيام بذلك، في تطبيق Rails 7.0+ الجديد الذي تم إنشاؤه بدون خيار --webpacker ، قم بإضافة جوهرة bootstrap إلى Gemfile الخاص بك: 

 gem "bootstrap" , "~> 5.0"

واتبع التعليمات المتبقية في دليل التثبيت الرسمي لـ bootstrap لإعداد application.scss و application.js .

أضف جوهرة bootstrap_form إلى Gemfile الخاص بك: 

 gem "bootstrap_form" , "~> 5.4"

ثم:

bundle install

اعتمادًا على معالج CSS المسبق الذي تستخدمه، تختلف إضافة أنماط نموذج التمهيد قليلًا. إذا كنت تستخدم Rails في الوضع الافتراضي دون أي معالج مسبق، فسيتعين عليك إضافة السطر التالي إلى ملف application.css الخاص بك: 

 * = require rails_bootstrap_forms

إذا اتبعت دليل التثبيت الرسمي لـ bootstrap، فمن المحتمل أن تكون قد انتقلت إلى SCSS. في هذه الحالة أضف السطر التالي إلى application.scss الخاص بك: 

 @import " rails_bootstrap_forms.css " ;

الاستخدام

bootstrap_form_for

للبدء، استخدم مساعد bootstrap_form_for بدلاً من مساعد Rails form_for . هنا مثال:

Example 0

 <%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

يؤدي هذا إلى إنشاء HTML التالي: 

 < form accept-charset =" UTF-8 " action =" /users " class =" new_user " id =" new_user " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label required " for =" user_email " > Email </ label >
    < input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" user_password " > Password </ label >
    < input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
  </ div >
  < div class =" form-check mb-3 " >
    < input autocomplete =" off " name =" user[remember_me] " type =" hidden " value =" 0 " >
    < input class =" form-check-input " id =" user_remember_me " name =" user[remember_me] " type =" checkbox " value =" 1 " >
    < label class =" form-check-label " for =" user_remember_me " > Remember me </ label >
  </ div >
  < input class =" btn btn-secondary " data-disable-with =" Log In " name =" commit " type =" submit " value =" Log In " >
</ form >

bootstrap_form_tag

إذا لم يكن النموذج الخاص بك مدعومًا بنموذج، فاستخدم bootstrap_form_tag . استخدام هذا المساعد هو نفس استخدام bootstrap_form_for ، باستثناء أنه لا يتم تمرير أي كائن نموذج باعتباره الوسيط الأول. هنا مثال:

Example 1

 <%= bootstrap_form_tag url: '/subscribe' do |f| %>
  <%= f.email_field :email, value: '[email protected]' %>
  <%= f.submit %>
<% end %>

هذا يولد: 

 < form accept-charset =" UTF-8 " action =" /subscribe " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label " for =" email " > Email </ label >
    < input class =" form-control " id =" email " name =" email " type =" email " value =" [email protected] " >
  </ div >
  < input class =" btn btn-secondary " data-disable-with =" Save " name =" commit " type =" submit " value =" Save " >
</ form >

bootstrap_form_with

للبدء، ما عليك سوى استخدام المساعد bootstrap_form_with بدلاً من form_with . هنا مثال:

Example 2

 <%= bootstrap_form_with(model: @user, local: true) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password, help: 'A good password should be at least six characters long' %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

هذا يولد: 

 < form accept-charset =" UTF-8 " action =" /users " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label required " for =" user_email " > Email </ label >
    < input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" user_password " > Password </ label >
    < input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
    < small class =" form-text text-muted " > A good password should be at least six characters long </ small >
  </ div >
  < div class =" form-check mb-3 " >
    < input autocomplete =" off " name =" user[remember_me] " type =" hidden " value =" 0 " >
    < input class =" form-check-input " id =" user_remember_me " name =" user[remember_me] " type =" checkbox " value =" 1 " >
    < label class =" form-check-label " for =" user_remember_me " > Remember me </ label >
  </ div >
  < input class =" btn btn-secondary " data-disable-with =" Log In " name =" commit " type =" submit " value =" Log In " >
</ form >

يدعم bootstrap_form_with كلا من model: وعنوان url: حالات الاستخدام في form_with .

لدى form_with بعض الاختلافات المهمة مقارنةً بـ form_for و form_tag ، وتنطبق هذه الاختلافات على bootstrap_form_with . يمكن العثور على ملخص جيد للاختلافات على: https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a، أو في وثائق Rails.

bootstrap_fields_for و bootstrap_fields

يمكن تحقيق إضافة حقول لكائن مختلف دون تداخل باستخدام مساعدي bootstrap_fields_for و bootstrap_fields بنفس الطريقة التي يتم بها ذلك في Rails.

Example 3

 <%= bootstrap_form_with model: @user do |f| %>
  <%= f.email_field :email %>
  <%= bootstrap_fields_for :parent do |pf| %>
    <%= pf.email_field :email, label: 'Parent email' %>
  <% end %>
  <%= bootstrap_fields @user.address do |af| %>
    <%= af.text_field :street_name %>
  <% end %>
  <%= f.primary "Save" %>
<% end %>

HTML الذي تم إنشاؤه: 

 < form accept-charset =" UTF-8 " action =" /users " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label required " for =" user_email " > Email </ label >
    < input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" parent_email " > Parent email </ label >
    < input class =" form-control " id =" parent_email " name =" parent[email] " type =" email " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" street_name " > Street name </ label >
    < input class =" form-control " id =" street_name " name =" street_name " type =" text " >
  </ div >
  < input class =" btn btn-primary " data-disable-with =" Save " name =" commit " type =" submit " value =" Save " >
</ form >

إعدادات

يمكن استخدام bootstrap_form خارج الصندوق دون أي تكوين. ومع ذلك، يحتوي bootstrap_form على ملف تكوين اختياري في config/initializers/bootstrap_form.rb لإعداد الخيارات التي تؤثر على جميع النماذج التي تم إنشاؤها في التطبيق.

خيارات التكوين الحالية هي:

خيار القيمة الافتراضية وصف
default_form_attributes أضاف الإصداران 3 و4 bootstrap_form سمة role="form" إلى جميع النماذج. سيقوم مدقق W3C برفع تحذير على النماذج ذات السمة role = "form" . يسقط الإصدار 5 bootstrap_form هذه السمة افتراضيًا. اضبط هذا الخيار على { role: "form" } لجعل النماذج غير متوافقة مع W3C، ولكن قم بإنشاء سمة role="form" مثل الإصدارين 3 و4 bootstrap_form .

مثال: 

 # config/initializers/bootstrap_form.rb
BootstrapForm . configure do | c |
  c . default_form_attributes = { role : "form" } # to make forms non-compliant with W3C.
end

مساعدو النموذج

يوفر bootstrap_form نسخته الخاصة من مساعدات نماذج Rails التالية: 

 button                   email_field                               search_field
check_box                file_field                                select
collection_check_boxes   grouped_collection_select                 submit
collection_radio_buttons hidden_field (not wrapped, but supported) telephone_field
collection_select        month_field                               text_area
color_field              number_field                              text_field
date_field               password_field                            time_field
date_select              phone_field                               time_select
datetime_field           radio_button                              time_zone_select
datetime_local_field     range_field                               url_field
datetime_select          rich_text_area                            week_field

افتراضيًا، يقوم المساعدون بإنشاء علامة label وعلامة input أو select أو textarea ، عن طريق استدعاء مساعد label Rails، ثم مساعد Rails الذي يحمل نفس اسم مساعد bootstrap_form .

يقبل مساعد bootstrap_form نفس الخيارات مثل مساعد نموذج Rails القياسي، ويمرر هذه الخيارات إلى مساعد Rails. كما أنهم يقبلون الخيارات الإضافية الموضحة في القسم التالي.

خيارات مساعد النموذج

يقبل العديد من المساعدين نفس الخيارات. الاستثناءات هي:

زر، check_box، Collection_check_boxes، Collection_radio_buttons، Collection_select، date_select، datetime_select، file_field، grouped_collection_select، Hidden_field، radio_button، rich_text_area، حدد، أرسل، time_select، time_zone_select

تم توضيح خيارات مساعدات النموذج غير الموجودة في قائمة الاستثناءات في الأقسام الفرعية التالية:

التسميات

استخدم خيار label إذا كنت تريد تحديد نص تسمية الحقل:

Example 4

 <%= f.password_field :password_confirmation, label: "Confirm Password" %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_password_confirmation " > Confirm Password </ label >
  < input class =" form-control " id =" user_password_confirmation " name =" user[password_confirmation] " type =" password " >
</ div >

لإخفاء تسمية، استخدم خيار hide_label: true . يؤدي هذا إلى إضافة فئة visually-hidden ، مما يجعل التسميات الخاصة بك في متناول أولئك الذين يستخدمون برامج قراءة الشاشة.

Example 5

 <%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" visually-hidden " for =" user_comment " > Comment </ label >
  < textarea class =" form-control " id =" user_comment " name =" user[comment] " placeholder =" Leave a comment... " >
</ textarea >
</ div >

لإضافة فئات مخصصة إلى تسمية الحقل:

Example 6

 <%= f.email_field :email, label_class: "custom-class" %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" custom-class required " for =" user_email " > Email </ label >
  < input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
</ div >

أو يمكنك إضافة التسمية كعنصر نائب للإدخال بدلاً من ذلك (يؤدي هذا إلى إخفاء التسمية تلقائيًا):

Example 7

 <%= f.email_field :email, value: '', label_as_placeholder: true %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" visually-hidden required " for =" user_email " > Email </ label >
  < input class =" form-control " id =" user_email " name =" user[email] " placeholder =" Email " required =" required " type =" email " value ="" >
</ div >

عناصر الإدخال / الضوابط

لتحديد فئة علامة الإدخال التي تم إنشاؤها، استخدم خيار control_class :

Example 8

 <%= f.text_field :email, control_class: "custom-class" %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" form-label required " for =" user_email " > Email </ label >
  < input class =" custom-class " id =" user_email " name =" user[email] " required =" required " type =" text " value =" [email protected] " >
</ div >

نص المساعدة

لإضافة نص تعليمات، استخدم خيار help :

Example 9

 <%= f.password_field :password, help: "Must be at least 6 characters long" %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_password " > Password </ label >
  < input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
  < small class =" form-text text-muted " > Must be at least 6 characters long </ small >
</ div >

تدرك هذه الجوهرة أيضًا رسائل المساعدة الموجودة في ملفات الترجمة المحلية (i18n): 

 en :
  activerecord :
    help :
      user :
        password : " A good password should be at least six characters long "

يجب أن تتبع الترجمات المساعدة التي تحتوي على HTML تقليد إلحاق _html بالاسم: 

 en :
  activerecord :
    help :
      user :
        password_html : " A <strong>good</strong> password should be at least six characters long "

إذا كان اسم النموذج الخاص بك يحتوي على كلمات متعددة (مثل SuperUser )، فيجب وضع علامة تحت المفتاح الموجود في ملف الترجمة ( super_user ).

يمكنك تجاوز ترجمات المساعدة الخاصة بحقل معين عن طريق تمرير خيار help أو إيقاف تشغيلها تمامًا عن طريق تمرير help: false .

التجهيز المسبق للمدخلات وإلحاقها

يمكنك تمرير خيارات prepend و/أو append لحقول الإدخال:

Example 10

 <%= f.text_field :price, prepend: "$", append: ".00" %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_price " > Price </ label >
  < div class =" input-group " >
    < span class =" input-group-text " > $ </ span >
    < input class =" form-control " id =" user_price " name =" user[price] " type =" text " >
    < span class =" input-group-text " > .00 </ span >
  </ div >
</ div >

إذا كنت تريد إرفاق عناصر متعددة بالإدخال، فقم بتمريرها كمصفوفة:

Example 11

 <% icon = capture do %> < i class =" bi bi-currency-dollar " > </ i > <% end %>
<%= f . text_field :price , prepend : [ 'Net' , icon ] , append : [ '.00' , 'per day' ] %>

هذا يولد: 

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_price " > Price </ label >
  < div class ="
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل