bootstrap_form
v5.4.0
bootstrap_form ist ein Rails-Formularersteller, mit dem Sie ganz einfach Formulare im Bootstrap v5-Stil in Ihre Rails-Anwendung integrieren können. Es stellt Formularhelfer bereit, die die Rails-Formularhelfer ergänzen. Die Formularhilfsprogramme von bootstrap_forms generieren das Formularfeld und seine Beschriftung sowie das gesamte Bootstrap-Markup, das für die ordnungsgemäße Bootstrap-Anzeige erforderlich ist. bootstrap_form bietet außerdem:
bootstrap_form deaktivieren und es selbst tun. Beachten Sie, dass dies für von Rails generierte Validierungsnachrichten gilt. Die clientseitige Validierung von HTML 5 und die standardmäßige Rails-Validierung funktionieren nicht wirklich gut zusammen. Eine Diskussion der Herausforderungen und einiger Lösungen finden Sie hierrequired Attribut in erforderlichen Feldern.bootstrap_form nicht kann. Einige andere nette Dinge, die bootstrap_form für Sie erledigt, sind:
.erb Dateien. bootstrap_form funktioniert wie die standardmäßigen Rails-Formularhilfsprogramme, und in dieser README-Datei wird davon ausgegangen, dass Sie wissen, wie sie funktionieren. Sie starten ein Formular mit einem von bootstrap_form_with , bootstrap_form_for “ oder bootstrap_form_tag in einer Ansichtsdatei. Sie erhalten einen Formular-Builder, der die bootstrap_form Helfer anstelle der Standard-Rails-Helfer aufruft. Sie verwenden diesen Formularersteller in der Ansichtsdatei, um ein oder mehrere Formularfelder darzustellen.
bootstrap_form unterstützt mindestens die derzeit unterstützten Versionen von Ruby und Rails:
Installieren Sie Bootstrap 5. Dafür gibt es viele Möglichkeiten, abhängig von der Asset-Pipeline, die Sie in Ihrer Rails-Anwendung verwenden. Eine Möglichkeit besteht darin, den Edelstein zu verwenden, der mit Sprockets funktioniert. Fügen Sie dazu in einer brandneuen Rails 7.0+-Anwendung, die ohne die Option --webpacker erstellt wurde, das bootstrap Gem zu Ihrer Gemfile hinzu:
gem "bootstrap" , "~> 5.0" Und befolgen Sie die restlichen Anweisungen im offiziellen Bootstrap-Installationshandbuch zum Einrichten application.scss und application.js .
Fügen Sie den Edelstein bootstrap_form zu Ihrer Gemfile hinzu:
gem "bootstrap_form" , "~> 5.4"Dann:
bundle install
Je nachdem, welchen CSS-Präprozessor Sie verwenden, unterscheidet sich das Hinzufügen der Bootstrap-Formularstile geringfügig. Wenn Sie Rails im Standardmodus ohne Präprozessor verwenden, müssen Sie die folgende Zeile zu Ihrer application.css Datei hinzufügen:
* = require rails_bootstrap_forms Wenn Sie der offiziellen Bootstrap-Installationsanleitung gefolgt sind, sind Sie wahrscheinlich zu SCSS gewechselt. Fügen Sie in diesem Fall die folgende Zeile zu Ihrer application.scss hinzu:
@import " rails_bootstrap_forms.css " ; Verwenden Sie zunächst den Helfer bootstrap_form_for anstelle des Rails-Helfers form_for . Hier ist ein Beispiel:
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %> Dadurch wird folgender HTML-Code generiert:
< 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 > Wenn Ihr Formular nicht durch ein Modell unterstützt wird, verwenden Sie den bootstrap_form_tag . Die Verwendung dieses Helfers ist die gleiche wie bei bootstrap_form_for , außer dass kein Modellobjekt als erstes Argument übergeben wird. Hier ist ein Beispiel:
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
<%= f.email_field :email, value: '[email protected]' %>
<%= f.submit %>
<% end %>Dadurch entsteht:
< 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 > Um zu beginnen, verwenden Sie einfach den bootstrap_form_with Helfer anstelle von form_with . Hier ist ein Beispiel:
<%= 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 %> Dadurch entsteht:
< 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 unterstützt sowohl die Anwendungsfälle model: als auch url: in form_with .
form_with weist im Vergleich zu form_for und form_tag einige wichtige Unterschiede auf, und diese Unterschiede gelten für bootstrap_form_with . Eine gute Zusammenfassung der Unterschiede finden Sie unter: https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a oder in der Rails-Dokumentation.
Das Hinzufügen von Feldern für ein anderes Objekt ohne Verschachtelung kann mit den Hilfsprogrammen bootstrap_fields_for und bootstrap_fields auf die gleiche Weise wie in Rails erreicht werden.
<%= 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 %> Generiertes 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 kann sofort und ohne Konfiguration verwendet werden. bootstrap_form verfügt jedoch über eine optionale Konfigurationsdatei unter config/initializers/bootstrap_form.rb zum Festlegen von Optionen, die sich auf alle generierten Formulare in einer Anwendung auswirken.
Die aktuellen Konfigurationsoptionen sind:
| Option | Standardwert | Beschreibung |
|---|---|---|
default_form_attributes | bootstrap_form Versionen 3 und 4 haben allen Formularen das Attribut „role="form" hinzugefügt. Der W3C-Validator löst bei Formularen mit dem Attribut „role="form"“ eine Warnung aus. bootstrap_form Version 5 löscht dieses Attribut standardmäßig. Setzen Sie diese Option auf { role: "form" } um Formulare nicht W3C-konform zu machen, aber das Attribut role="form" wie bootstrap_form Versionen 3 und 4 zu generieren. |
Beispiel:
# 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 stellt eine eigene Version der folgenden Rails-Formularhelfer bereit:
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
Standardmäßig generieren die Helfer ein label -Tag und ein input , select oder textarea Tag, indem sie den Rails- label -Helfer und dann den Rails-Helfer mit demselben Namen wie der bootstrap_form -Helfer aufrufen.
Die bootstrap_form -Helfer akzeptieren dieselben Optionen wie die standardmäßigen Rails-Formularhelfer und geben diese Optionen an den Rails-Helfer weiter. Sie akzeptieren auch zusätzliche Optionen, die im folgenden Abschnitt beschrieben werden.
Viele der Helfer akzeptieren die gleichen Optionen. Die Ausnahmen sind:
Button, 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, Select, Submit, Time_Select, Time_Zone_Select
Die Optionen für die Formular-Helfer, die nicht in der Ausnahmeliste enthalten sind, werden in den folgenden Unterabschnitten beschrieben:
Verwenden Sie die label , wenn Sie den Beschriftungstext des Felds angeben möchten:
<%= f.password_field :password_confirmation, label: "Confirm Password" %> Dadurch entsteht:
< 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 > Um eine Beschriftung auszublenden, verwenden Sie die Option hide_label: true . Dadurch wird die visually-hidden Klasse hinzugefügt, die dafür sorgt, dass Ihre Beschriftungen für Benutzer von Bildschirmleseprogrammen zugänglich bleiben.
<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %> Dadurch entsteht:
< 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 >So fügen Sie der Feldbeschriftung benutzerdefinierte Klassen hinzu:
<%= f.email_field :email, label_class: "custom-class" %> Dadurch entsteht:
< 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 >Oder Sie können stattdessen die Beschriftung als Eingabeplatzhalter hinzufügen (dadurch wird die Beschriftung automatisch ausgeblendet):
<%= f.email_field :email, value: '', label_as_placeholder: true %> Dadurch entsteht:
< 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 > Um die Klasse des generierten Eingabe-Tags anzugeben, verwenden Sie die Option control_class :
<%= f.text_field :email, control_class: "custom-class" %> Dadurch entsteht:
< 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 > Um Hilfetext hinzuzufügen, verwenden Sie die help :
<%= f.password_field :password, help: "Must be at least 6 characters long" %> Dadurch entsteht:
< 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 >Dieses Gem kennt auch Hilfemeldungen in Gebietsschema-Übersetzungsdateien (i18n):
en :
activerecord :
help :
user :
password : " A good password should be at least six characters long " Hilfeübersetzungen, die HTML enthalten, sollten der Konvention folgen, _html an den Namen anzuhängen:
en :
activerecord :
help :
user :
password_html : " A <strong>good</strong> password should be at least six characters long " Wenn Ihr Modellname aus mehreren Wörtern besteht (z. B. SuperUser ), sollte der Schlüssel in der Übersetzungsdatei unterstrichen sein ( super_user ).
Sie können Hilfeübersetzungen für ein bestimmtes Feld überschreiben, indem Sie die Option help übergeben, oder sie vollständig deaktivieren, indem Sie help: false übergeben.
Sie können Eingabefeldern Optionen zum prepend und/oder append übergeben:
<%= f.text_field :price, prepend: "$", append: ".00" %> Dadurch entsteht:
< 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 >Wenn Sie mehrere Elemente an die Eingabe anhängen möchten, übergeben Sie sie als Array:
<% icon = capture do %> < i class =" bi bi-currency-dollar " > </ i > <% end %>
<%= f . text_field :price , prepend : [ 'Net' , icon ] , append : [ '.00' , 'per day' ] %>Dadurch entsteht:
< div class =" mb-3 " >
< label class =" form-label " for =" user_price " > Price </ label >
< div class ="
