【问题标题】:Multiple radio buttons with simple_form (Star Rating)带有 simple_form 的多个单选按钮(星级)
【发布时间】:2017-01-28 17:20:06
【问题描述】:

我正在使用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 并且知道我需要创建一个自定义包装器来执行此操作,但我一直在追寻它,但似乎无法弄清楚。

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

【问题讨论】:

  • 在 codepen 上试试这个 sn-p LINK
  • 嘿@JyotiPathania,问题更多是关于使用 simple_form 获得所需的 HTML 输出:/

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


【解决方案1】:

感谢@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 %>

【讨论】:

    【解决方案2】:

    您可以使用来自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
    

    【讨论】:

    • 嘿@HarlemSquirrel,我知道collection_radio_buttons,但它会生成与我需要的布局完全不同的布局:/ 你知道我可以如何调整包装器以获得我需要的输出吗?
    • 我相信您可以添加item_label_class: 'full' 来帮助设置标签样式
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-11-19
    • 2014-01-14
    • 2020-07-24
    • 1970-01-01
    • 1970-01-01
    • 2019-04-11
    • 1970-01-01
    相关资源
    最近更新 更多