7

我正在尝试使用 FontAwesome 制作带有收音机收藏的星级表格,为此我实际上需要更改由 simple_form 生成的 collection_radio_button 输入的标签类,但找不到任何明显的解决方案。

到目前为止,我使用:

form_for @user do |f|
  f.collection_radio_buttons :rating, [[1, 'Bad'] ,[2, 'Ok'], [3, 'Great']],
                             :first, :last, { item_wrapper_tag: false }
end

生成:

<input id="review_rating_1" name="review[rating]" type="radio" value="1" />
<label class="collection_radio_buttons" for="review_rating_1">Bad</label>
<input id="review_rating_2" name="review[rating]" type="radio" value="2" />
<label class="collection_radio_buttons" for="review_rating_2">Ok</label>
<input id="review_rating_3" name="user[options]" type="radio" value="3" />
<label class="collection_radio_buttons" for="review_rating_3">Great</label>

但我希望标签有一个额外的类,比如:

<input id="review_rating_3" name="user[options]" type="radio" value="3" />
<label class="collection_radio_buttons icon-star" for="review_rating_3">Great</label>

更新:此类在以下位置静态定义:https ://github.com/plataformatec/simple_form/blob/master/lib/simple_form/tags.rb#L43

4

2 回答 2

13

这可以通过使用块来实现:

form_for @user do |f|
  f.collection_radio_buttons :rating, [[1, 'Bad'] ,[2, 'Ok'], [3, 'Great']],
                             :first, :last, { item_wrapper_tag: false } do |b|
    b.radio_button + b.label(:class => "collection_radio_buttons icon-star")
  end
end

该文档可以展示其他一些示例:http ://rubydoc.info/github/plataformatec/simple_form/SimpleForm/FormBuilder:collection_radio_buttons

于 2013-06-19T13:55:45.233 回答
1

万一有人想知道如何在您在这里设置标签包装单选按钮输入时添加类,boolean_style = :nested这就是我带来的:

您可以设置:item_label_class调用输入时调用的选项,fe:

<%= f.input :type, as: :radio_buttons,
                   collection: Listing::TYPES.map{ |type| [Listing.translate_type(type), type] },
                   label: false,
                   item_label_class: 'radio' %>

我想自动化这些东西,所以我定义了自定义CollectionRadioButtonsInput类。您需要添加到方法apply_default_collection_options!

def apply_default_collection_options!(options)
  super(options)
  options[:item_label_class] == 'radio' if input_type == :radio_buttons
end
于 2015-08-27T10:22:44.327 回答