bootstrap_form
v5.4.0
bootstrap_form adalah pembuat formulir Rails yang membuatnya sangat mudah untuk mengintegrasikan formulir bergaya Bootstrap v5 ke dalam aplikasi Rails Anda. Ini menyediakan pembantu formulir yang menambah pembantu formulir Rails. Pembantu formulir bootstrap_forms menghasilkan bidang formulir dan labelnya serta semua mark-up Bootstrap yang diperlukan untuk tampilan Bootstrap yang tepat. bootstrap_form juga menyediakan:
bootstrap_form dan melakukannya sendiri. Perhatikan bahwa ini berlaku untuk pesan validasi yang dihasilkan Rails. Validasi sisi klien HTML 5 dan validasi Rails di luar kotak tidak bekerja sama dengan baik. Salah satu pembahasan mengenai tantangan dan beberapa solusinya ada di sinirequired pada bidang yang wajib diisi.bootstrap_form tidak bisa lakukan. Beberapa hal baik lainnya yang bootstrap_form lakukan untuk Anda adalah:
.erb Anda. bootstrap_form berfungsi seperti pembantu formulir Rails standar, dan README ini mengasumsikan Anda mengetahui cara kerjanya. Anda memulai formulir dengan salah satu bootstrap_form_with , bootstrap_form_for , atau bootstrap_form_tag dalam file tampilan. Anda mendapatkan pembuat formulir yang memanggil pembantu bootstrap_form alih-alih pembantu Rails standar. Anda menggunakan pembuat formulir di file tampilan untuk merender satu atau beberapa bidang formulir.
bootstrap_form mendukung minimal versi Ruby dan Rails yang didukung saat ini:
Instal Bootstrap 5. Ada banyak cara untuk melakukan ini, bergantung pada pipeline aset yang Anda gunakan di aplikasi Rails Anda. Salah satu caranya adalah dengan menggunakan permata yang berfungsi dengan Sprocket. Untuk melakukannya, dalam aplikasi Rails 7.0+ baru yang dibuat tanpa opsi --webpacker , tambahkan permata bootstrap ke Gemfile Anda:
gem "bootstrap" , "~> 5.0" Dan ikuti instruksi selanjutnya di panduan instalasi bootstrap resmi untuk menyiapkan application.scss dan application.js .
Tambahkan permata bootstrap_form ke Gemfile Anda:
gem "bootstrap_form" , "~> 5.4"Kemudian:
bundle install
Bergantung pada pra-prosesor CSS yang Anda gunakan, menambahkan gaya formulir bootstrap sedikit berbeda. Jika Anda menggunakan Rails dalam mode default tanpa pra-prosesor apa pun, Anda harus menambahkan baris berikut ke file application.css Anda:
* = require rails_bootstrap_forms Jika Anda mengikuti panduan instalasi bootstrap resmi, Anda mungkin telah beralih ke SCSS. Dalam hal ini tambahkan baris berikut ke application.scss Anda :
@import " rails_bootstrap_forms.css " ; Untuk memulai, gunakan helper bootstrap_form_for sebagai pengganti helper Rails form_for . Berikut ini contohnya:
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.submit "Log In" %>
<% end %> Ini menghasilkan HTML berikut:
< 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 > Jika formulir Anda tidak didukung oleh model, gunakan bootstrap_form_tag . Penggunaan helper ini sama dengan bootstrap_form_for , kecuali tidak ada objek model yang diteruskan sebagai argumen pertama. Berikut ini contohnya:
<%= bootstrap_form_tag url: '/subscribe' do |f| %>
<%= f.email_field :email, value: '[email protected]' %>
<%= f.submit %>
<% end %>Ini menghasilkan:
< 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 > Untuk memulai, cukup gunakan helper bootstrap_form_with sebagai pengganti form_with . Berikut ini contohnya:
<%= 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 %> Ini menghasilkan:
< 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 mendukung kasus penggunaan model: dan url: di form_with .
form_with memiliki beberapa perbedaan penting dibandingkan dengan form_for dan form_tag , dan perbedaan ini berlaku untuk bootstrap_form_with . Ringkasan perbedaannya dapat ditemukan di: https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a, atau di dokumentasi Rails.
Menambahkan bidang untuk objek berbeda tanpa membuat sarang dapat dilakukan menggunakan pembantu bootstrap_fields_for dan bootstrap_fields dengan cara yang sama seperti yang dilakukan di 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 yang dihasilkan:
< 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 dapat digunakan langsung tanpa konfigurasi apa pun. Namun, bootstrap_form memiliki file konfigurasi opsional di config/initializers/bootstrap_form.rb untuk opsi pengaturan yang memengaruhi semua formulir yang dihasilkan dalam suatu aplikasi.
Opsi konfigurasi saat ini adalah:
| Pilihan | Nilai bawaan | Keterangan |
|---|---|---|
default_form_attributes | bootstrap_form versi 3 dan 4 menambahkan atribut role="form" ke semua formulir. Validator W3C akan memunculkan peringatan pada formulir dengan atribut role="form" . bootstrap_form versi 5 menghilangkan atribut ini secara default. Setel opsi ini ke { role: "form" } untuk membuat formulir tidak sesuai dengan W3C, tetapi buat atribut role="form" seperti bootstrap_form versi 3 dan 4. |
Contoh:
# 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 menyediakan versinya sendiri dari pembantu formulir Rails berikut:
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
Secara default, helper menghasilkan tag label , dan tag input , select , atau textarea , dengan memanggil helper label Rails, dan kemudian helper Rails dengan nama yang sama dengan helper bootstrap_form .
Helper bootstrap_form menerima opsi yang sama dengan helper formulir Rails standar, dan meneruskan opsi tersebut ke helper Rails. Mereka juga menerima opsi tambahan, yang dijelaskan di bagian berikut.
Banyak dari para pembantu menerima pilihan yang sama. Pengecualiannya adalah:
tombol, kotak_centang, kotak_cek_koleksi, tombol_radio_koleksi, pilihan_koleksi, pilih_tanggal, pilih_tanggal, bidang_file, pilih_koleksi_kelompok, bidang_tersembunyi, tombol_radio, area_teks kaya, pilih, kirim, pilih_waktu, zona_pilih_waktu
Opsi untuk pembantu formulir yang tidak ada dalam daftar pengecualian dijelaskan dalam sub-bagian berikut:
Gunakan opsi label jika Anda ingin menentukan teks label bidang:
<%= f.password_field :password_confirmation, label: "Confirm Password" %> Ini menghasilkan:
< 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 > Untuk menyembunyikan label, gunakan opsi hide_label: true . Ini menambahkan kelas visually-hidden , yang membuat label Anda dapat diakses oleh mereka yang menggunakan pembaca layar.
<%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %> Ini menghasilkan:
< 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 >Untuk menambahkan kelas khusus ke label bidang:
<%= f.email_field :email, label_class: "custom-class" %> Ini menghasilkan:
< 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 >Atau Anda dapat menambahkan label sebagai pengganti masukan (ini secara otomatis menyembunyikan label):
<%= f.email_field :email, value: '', label_as_placeholder: true %> Ini menghasilkan:
< 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 > Untuk menentukan kelas dari tag masukan yang dihasilkan, gunakan opsi control_class :
<%= f.text_field :email, control_class: "custom-class" %> Ini menghasilkan:
< 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 > Untuk menambahkan teks bantuan, gunakan opsi help :
<%= f.password_field :password, help: "Must be at least 6 characters long" %> Ini menghasilkan:
< 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 >Permata ini juga mengetahui pesan bantuan dalam file terjemahan lokal (i18n):
en :
activerecord :
help :
user :
password : " A good password should be at least six characters long " Terjemahan bantuan yang berisi HTML harus mengikuti aturan penambahan _html pada namanya:
en :
activerecord :
help :
user :
password_html : " A <strong>good</strong> password should be at least six characters long " Jika nama model Anda memiliki banyak kata (seperti SuperUser ), kunci pada file terjemahan harus digarisbawahi ( super_user ).
Anda dapat mengganti terjemahan bantuan untuk bidang tertentu dengan meneruskan opsi help atau mematikannya sepenuhnya dengan meneruskan help: false .
Anda dapat meneruskan opsi prepend dan/atau append ke kolom input:
<%= f.text_field :price, prepend: "$", append: ".00" %> Ini menghasilkan:
< 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 >Jika Anda ingin melampirkan beberapa item ke input, teruskan item tersebut sebagai array:
<% icon = capture do %> < i class =" bi bi-currency-dollar " > </ i > <% end %>
<%= f . text_field :price , prepend : [ 'Net' , icon ] , append : [ '.00' , 'per day' ] %>Ini menghasilkan:
< div class =" mb-3 " >
< label class =" form-label " for =" user_price " > Price </ label >
< div class ="
