在Rails表单erb中使用Bootstrap格式化复选框? [英] Formatting checkboxes with Bootstrap in Rails form erb?
问题描述
我在Rails视图表单中使用了多个复选框.我正在使用Bootstrap 4进行样式设置.如果复选框具有Bootstrap样式,例如:
I'm using multiple check boxes in my Rails views form. I'm using Bootstrap 4 for styling. If there is a Bootstrap style for checkboxes like:
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
如何在erb对象中实现多个类样式?这是我要实现的代码:
how do I implement multiple class stylings into an erb object? Here is the code I'm trying to implement:
<%= f.collection_check_boxes(:authorization_ids, Authorization.all, :id, :auth_name, { checked: @account.try { |a| a.authorization_ids.map(&:to_param) } }, multiple: true, # WOULD LIKE TO IMPLEMENT BOOTSTRAP CLASSES HERE ) %>
<%= f.label :authorization_ids, 'Authorizations' %>
更新
这里有一些很好的回应.我最终使用了 bootstrap_form_with
rails_bootstrap_form
宝石.我使用了一个自定义包装器类来进行样式设置,并能够将这些复选框以整齐有序的列和行显示.
Some great responses here. I ended up using bootstrap_form_with
from the
rails_bootstrap_form
Gem. I used a custom wrapper class for styling and was able to get the checkboxes in nice orderly columns and rows.
<div class="container">
<div class="col">
<div class="row justify-content-center">
<div class='form-group'>
<%= bootstrap_form_with(model: @account) do |f| %>
<%= f.text_field :account_name %>
<%= f.text_field :account_address_line1 %>
<%= f.text_field :account_address_line2 %>
<%= f.text_field :account_city %>
<%= f.select :account_state, states %>
<%= f.text_field :account_zipcode %>
<%= f.text_field :contact_first_name %>
<%= f.text_field :contact_last_name %>
<%= f.email_field :contact_email %>
<%= f.telephone_field :contact_phone %>
<%= f.select :account_ppu, ppu, placeholder: "Select PPU...." %>
<%= f.text_area :account_notes %>
</div>
<%= f.collection_check_boxes :authorization_ids, Authorization.all, :id, :auth_name, hide_label: true, wrapper: {class: "cp-container-class"} %>
</div>
<%= f.submit 'Create' %>
<% end %>
</div>
</div>
样式:
@import "bootstrap";
@import "rails_bootstrap_forms";
@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi+2|Lato&display=swap');
body {
margin: 0px;
}
#logo {
margin: 1em;
padding: 1em;
width: 500px;
height: auto;
}
.cp-container-class {
width: 1000px;
height: 500px;
justify-items: center;
flex-direction:column;
padding: 10px;
/* Change to whatever*/
display: flex;
flex-wrap: wrap;
border: black 1px solid;
}
.cp-container-class>* {
flex: 1 1 20px;
margin-left: 50px;
letter-spacing: 5px;
}
推荐答案
根据文档(针对 collection_check_boxes
),您可以使用构建器来添加HTML类,如下所示:
According to the documentation for collection_check_boxes
, you can add HTML classes by using a builder, like this:
collection_check_boxes(:post, :author_ids, Author.all, :id, :name_with_initial) do |b|
b.label(class: "check_box") { b.check_box(class: "check_box") }
end
根据您的情况,它看起来像这样:
In terms of your situation, it would look something like this:
collection_check_boxes(:authorization_ids, Authorization.all, :id, :auth_name, { checked: @account.try { |a| a.authorization_ids.map(&:to_param) } }, multiple: true) do |b|
b.label(class: "some-class another-class") { b.check_box(class: "a-class a-different-class") }
end
那可能不完全是您想要的;您可能需要尝试一下.
That might not be exactly what you want; you might have to play around with it a bit.
这篇关于在Rails表单erb中使用Bootstrap格式化复选框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!