带有simple_form的多个单选按钮(星级)

时间:2017-01-28 17:20:07

标签: ruby-on-rails twitter-bootstrap sass simple-form simple-form-for

我正在使用simple_form并试图让自定义包装器正常工作。到目前为止没有运气。

我希望创建一个简单的星级评分,每个值都有5个单选按钮。所需的输出:

<fieldset class="rating-new">
  <input type="radio" id="star5" name="rating" value="5" />
  <label class = "full" for="star5" title="Awesome - 5 stars"></label>

  <input type="radio" id="star4" name="rating" value="4" />
  <label class = "full" for="star4" title="Pretty good - 4 stars"></label>

  <input type="radio" id="star3" name="rating" value="3" />
  <label class = "full" for="star3" title="Meh - 3 stars"></label>

  <input type="radio" id="star2" name="rating" value="2" />
  <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>

  <input type="radio" id="star1" name="rating" value="1" />
  <label class = "full" for="star1" title="Sucks big time - 1 star"></label>
</fieldset>

我正在使用simple_form-bootstrap并明白我需要创建一个自定义包装器才能执行此操作但我追了很多并且似乎无法弄明白。

关于如何实现这一目标的想法?

2 个答案:

答案 0 :(得分:3)

感谢@HarlemSquirrel提醒我collection_radio_buttons。我想为它创建一个自定义包装器,但我决定调整标签和样式以获得我想要的位置:

以下是我的工作原理:

<%= f.collection_radio_buttons :rating, [[5], [4], [3], [2], [1]], :first, :last, item_wrapper_tag: false, boolean_style: :inline do |b| %>
  <%= b.radio_button + b.label {''} %>
<% end %>

答案 1 :(得分:0)

您可以使用https://github.com/plataformatec/simple_form#collection-radio-buttons

中的收集单选按钮
form_for @something_rated do |f|
  f.collection_radio_buttons :rating, [[1, '1'] ,[2, '2'],[3, '3'],[4, '4'],[5, '5']], :first, :last
end