我正在使用:
<%= simple_form_for @visitor, html: {class: 'form-inline'} do |f| %>
<%= f.error_notification %>
<%= f.input :favorite, label: false, as: :radio_buttons %>
<%= f.submit "Choose!", :class => "btn btn-primary"%>
<% end %>
我得到这个HTML:
<div class="control-group radio_buttons required visitor_favourite">
<div class="controls">
<label class="radio">
<input class="radio_buttons required" id="visitor_favourite_true" name="visitor[favourite]" type="radio" value="true" />
Yes
</label>
<label class="radio">
<input class="radio_buttons required" id="visitor_favourite_false" name="visitor[favourite]" type="radio" value="false" />
No
</label>
</div>
</div>
但我正在寻找的是一种生成无线电内联标签的方法,因为这是我想要的风格:
<label class="radio-inline">
有一个类似的问题here但是对于&#34;无线电内联&#34; class and desn用于生成无线电内联。
我正在使用simple_form 3.0.2并使用rails 4.1.4尝试了3.1.0rc2和Bootstrap 3.2.0 无论如何还是要解决这个问题的方法?
答案 0 :(得分:10)
通过从answer获取灵感,我设法通过创建:radio_buttons_inline输入类型来实现。
创建文件:
app/inputs/radio_buttons_inline_input.rb
有了这个内容:
class RadioButtonsInlineInput < SimpleForm::Inputs::CollectionRadioButtonsInput
def input
label_method, value_method = detect_collection_methods
@builder.send("collection_radio_buttons", attribute_name, collection, value_method,
label_method, input_options, input_html_options,
&collection_block_for_nested_boolean_style)
end
protected
def item_wrapper_class
"radio-inline"
end
end
然后在你的视图中使用它:
<%= simple_form_for @visitor do |f| %>
<%= f.error_notification %>
<%= f.input :favourite, :as => :radio_buttons_inline%>
<% end %>
这会将html呈现为:
<div class="control-group radio_buttons_inline required visitor_favourite">
<div class="controls">
<label class="radio-inline">
<input class="radio_buttons_inline required" id="visitor_favourite_true" name="visitor[favourite]" type="radio" value="true" />
Yes
</label>
<label class="radio-inline">
<input class="radio_buttons_inline required" id="visitor_favourite_false" name="visitor[favourite]" type="radio" value="false" />
No
</label>
</div>
</div>
答案 1 :(得分:10)
我在simple_form 3.1.0下完成了以下工作:
f.input :favorite, label: false, as: :radio_buttons,
item_label_class: "radio-inline", item_wrapper_tag: false
答案 2 :(得分:1)
这是Bootstrap 4:
<div class="form-check form-check-inline">
<%= f.label :favorite, class: "form-check-label" do %>
<%= f.radio_button :favorite, true, false, class: "form-check-input" %> Yes
<% end %>
</div>
<div class="form-check form-check-inline">
<%= f.label :favorite, class: "form-check-label" do %>
<%= f.radio_button :favorite, false, false, class: "form-check-input" %> No
<% end %>
</div>
答案 3 :(得分:-1)
直接传入:
item_wrapper_class: 'inline'
看起来像是:
<%= f.input :favorite, label: false, as: :radio_buttons, item_wrapper_class: 'inline' %>
它应该有用。