bootstrap_form
v5.4.0
bootstrap_form — это конструктор форм Rails, который упрощает интеграцию форм в стиле Bootstrap v5 в ваше приложение Rails. Он предоставляет помощники форм, которые дополняют помощники форм Rails. Помощники формы bootstrap_forms генерируют поле формы, его метку и всю разметку Bootstrap, необходимую для правильного отображения Bootstrap. bootstrap_form также предоставляет:
bootstrap_form и сделать это самостоятельно. Обратите внимание, что это относится к сообщениям проверки, сгенерированным Rails. Проверка HTML 5 на стороне клиента и проверка Rails «из коробки» не очень хорошо работают вместе. Одно обсуждение проблем и некоторых решений здесь.required атрибута в обязательных полях.bootstrap_form не может сделать. Еще несколько приятных вещей, которые bootstrap_form делает для вас:
.erb . bootstrap_form работает как стандартные помощники форм Rails, и в этом README предполагается, что вы знаете, как они работают. Вы запускаете форму с помощью одного из bootstrap_form_with , bootstrap_form_for или bootstrap_form_tag в файле представления. Вы получаете построитель форм, который вызывает помощники bootstrap_form вместо стандартных помощников Rails. Вы используете этот конструктор форм в файле представления для визуализации одного или нескольких полей формы.
bootstrap_form поддерживает как минимум поддерживаемые в настоящее время версии Ruby и Rails:
Установите Bootstrap 5. Есть много способов сделать это, в зависимости от конвейера ресурсов, который вы используете в своем приложении Rails. Один из способов — использовать драгоценный камень, который работает со звездочками. Для этого в новом приложении Rails 7.0+, созданном без опции --webpacker , добавьте драгоценный камень bootstrap в ваш Gemfile :
gem "bootstrap" , "~> 5.0" И следуйте остальным инструкциям в официальном руководстве по установке начальной загрузки для настройки application.scss и application.js .
Добавьте драгоценный камень bootstrap_form в свой Gemfile :
gem "bootstrap_form" , "~> 5.4"Затем:
bundle install
В зависимости от того, какой препроцессор CSS вы используете, добавление стилей формы начальной загрузки немного отличается. Если вы используете Rails в режиме по умолчанию без какого-либо препроцессора, вам придется добавить следующую строку в файл application.css :
* = require rails_bootstrap_forms Если вы следовали официальному руководству по установке начальной загрузки, вы, вероятно, переключились на SCSS. В этом случае добавьте следующую строку в файл application.scss :
@import " rails_bootstrap_forms.css " ; Для начала используйте помощник bootstrap_form_for вместо помощника Rails form_for . Вот пример:
<%= 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_for , за исключением того, что в качестве первого аргумента не передается объект модели. Вот пример:
<%= 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 вместо form_with . Вот пример:
<%= 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 так же, как это делается в Rails.
<%= 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 | В версиях bootstrap_form 3 и 4 ко всем формам добавлен атрибут role="form". Валидатор W3C выдаст предупреждение в формах с атрибутом role="form". bootstrap_form версии 5 по умолчанию удаляет этот атрибут. Установите для этой опции значение { role: "form" } чтобы сделать формы несовместимыми с W3C, но сгенерируйте атрибут role="form" как в bootstrap_form версий 3 и 4. |
Пример:
# 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 , вызывая помощник Rails label , а затем помощник Rails с тем же именем, что и помощник bootstrap_form .
Помощники bootstrap_form принимают те же параметры, что и стандартные помощники форм Rails, и передают эти параметры помощнику Rails. Они также принимают дополнительные параметры, описанные в следующем разделе.
Многие помощники принимают одни и те же варианты. Исключениями являются:
кнопка, флажок, коллекция_флажков, коллекция_радио_кнопки, коллекция_выбрать, дата_выбрать, дата-время_выбрать, поле_файла, сгруппированная_коллекция_выбрать, скрытое_поле, радиокнопка, богатая_текстовая_область, выбрать, отправить, выбор_времени, выбор_временной_зоны
Опции помощников форм, которых нет в списке исключений, описаны в следующих подразделах:
Используйте опцию label , если вы хотите указать текст метки поля:
<%= 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 класс, который делает ваши метки доступными для тех, кто использует программы чтения с экрана.
<%= 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 >Чтобы добавить пользовательские классы к метке поля:
<%= 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 >Или вы можете вместо этого добавить метку в качестве заполнителя ввода (это автоматически скроет метку):
<%= 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 :
<%= 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 :
<%= 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 в поля ввода:
<%= 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 >Если вы хотите прикрепить к входным данным несколько элементов, передайте их как массив:
<% 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 ="
