Question

如何为单选按钮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

似乎渲染正常，但验证停止工作。任何想法？

Answer 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 code）：

= f.input :remember_me, wrapper: :inline_checkbox

单选按钮的simple_form自定义布局

1 个答案: