simple_form 单选按钮的自定义布局答案

【问题标题】：simple_form custom layout for radio buttonssimple_form 单选按钮的自定义布局
【发布时间】：2014-11-09 15:20:56
【问题描述】：

你是如何为 insimple_form 单选按钮自定义布局的？

此代码生成单选按钮的垂直列表：

%fieldset
  = f.input :my_collection, label: false, collection: MY_COLLECTION, as: :radio_buttons

但我想要的是单选按钮位于单独的列中。所以我输出了文字单选按钮，如：

.control-group.radio_buttons.required.my_collection
    .controls
      .row-fluid
        .span3
          %label.radio
            = f.radio_button :my_collection, 'Foo', class: "radio-buttons required"
            Foo
          %label.radio
            = f.radio_button :my_collection, 'Bar', class: "radio-buttons required"
            Bar
        .span3
          %label.radio
            = f.radio_button :my_collection, 'Biz', class: "radio-buttons required"
            Biz
          %label.radio
            = f.radio_button :my_collection, 'Baz', class: "radio-buttons required"
            Baz

似乎渲染正常，但验证停止工作。有什么想法吗？

【问题讨论】：

请详细一点，验证规则是什么？您在问题中提到的更改后的错误消息是什么？
谢谢，抱歉，我什至不记得当时的情况了。刚结束对 html 表单进行硬编码，检查之前成功的输出。然后后来开始使用do 块

标签： radio-button simple-form

【解决方案1】：

查看custom wrappers 文档。有一些 Boostrap 或其他框架的示例。

例如，您可以将其添加到 simple_form 初始化程序中以创建自定义复选框包装器：

SimpleForm.setup do |config|

  config.wrappers :inline_checkbox, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :label_input, :wrap_with => { :class => 'checkbox inline' }
      ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end
end

然后像任何其他输入一样使用它，但指定自定义包装器（Slim 代码）：

= f.input :remember_me, wrapper: :inline_checkbox

【讨论】：