8

我想用 simple_form 重现这个 html 单选按钮序列，以便使 simple_form 与http://semantic-ui.com/语法一起工作：

  <div class="grouped inline fields">
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit" checked="">
        <label>Apples</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit">
        <label>Oranges</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit">
        <label>Pears</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit">
        <label>Grapefruit</label>
      </div>
    </div>
  </div>

所以我准备了一个自定义包装器：

config.wrappers :semantic_radios, tag: 'div', class: "grouped fields", error_class:   'error', hint_class: 'with_hint' do |b|
    b.use :html5
    b.use :label
    b.use :input
  end

设置一些选项：

config.item_wrapper_tag = :div
config.item_wrapper_class = 'ui radio checkbox'

并以我的形式调用此代码：

=f.input :child_care_type, collection: [["option 1", 1],["option 2", 2]], as: :radio_buttons, wrapper: :semantic_radios

我不知道在哪里自定义 div.field 封装：

    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="fruit" checked="">
        <label>Apples</label>
      </div>
    </div>

我的代码只呈现这个：

  <div class="ui radio checkbox">
    <input type="radio" name="fruit" checked="">
    <label>Apples</label>
  </div>

你能帮助我吗 ？我没有找到更多包装器的集合定制：s

4

3 回答 3

6

概括：

我之前通过创建一个继承自SimpleForm::Inputs::CollectionRadioButtonsInput并重载几个方法的自定义输入做过类似的事情。有关自定义输入组件的更多信息，请参阅https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components。

无论如何，下面的代码几乎完全使用 simple_form v2.1.0 和 rails v3.2.15 生成了您想要的 html 标记。

代码：

# File: app/inputs/semantic_ui_radio_buttons_input.rb

class SemanticUiRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput

  # Creates a radio button set for use with Semantic UI

  def input
    label_method, value_method = detect_collection_methods
    iopts = { 
      :checked => 1,
      :item_wrapper_tag => 'div',
      :item_wrapper_class => 'field',
      :collection_wrapper_tag => 'div',
      :collection_wrapper_class => 'grouped inline fields'
     }
    return @builder.send(
      "collection_radio_buttons",
      attribute_name,
      collection,
      value_method,
      label_method,
      iopts,
      input_html_options,
      &collection_block_for_nested_boolean_style
    )
  end # method

  protected

  def build_nested_boolean_style_item_tag(collection_builder)
    tag = String.new
    tag << '<div class="ui radio checkbox">'.html_safe
    tag << collection_builder.radio_button + collection_builder.label
    tag << '</div>'.html_safe
    return tag.html_safe
  end # method

end # class

然后，在您的表单中，只需执行以下操作：

-# File: app/views/<resource>/_form.html.haml

-# Define the collection
- child_care_coll = %w( Infant Toddler Preschool Kindergarten ).map!.with_index(1).to_a

-# Render the radio inputs
= f.input :child_care_type,
  :collection    => child_care_coll,
  :label_method  => :first,
  :value_method  => :last,
  :as            => :semantic_ui_radio_buttons

结果：

<div class="input semantic_ui_radio_buttons optional childcare_child_care_type">

  <label class="semantic_ui_radio_buttons optional control-label">
    Child care type
  </label>

  <div class="grouped inline fields">

    <div class="field">
      <div class="ui radio checkbox">
        <input checked="checked" class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_1" name="childcare[child_care_type]" type="radio" value="1">
        <label for="childcare_child_care_type_1">Infant</label>
      </div>
    </div>

    ...

    <div class="field">
      <div class="ui radio checkbox">
        <input class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_4" name="childcare[child_care_type]" type="radio" value="4">
        <label for="childcare_child_care_type_4">Kindergarten</label>
      </div>
    </div>

  </div>

</div>

在此处输入图像描述

于 2013-11-26T02:25:07.067 回答
4

在查看 config/initializers/simple_form.rb 之前，我遇到了同样的问题。

原来你可以在这里设置选项（第~51行）：

# Define the way to render check boxes / radio buttons with labels.
# Defaults to :nested for bootstrap config.
#   inline: input + label
#   nested: label > input
config.boolean_style = :inline

再往下一点，您还可以为集合定义默认包装器标记和包装器标记类（第 ~81 行）：

 # You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
 config.collection_wrapper_tag = :div

 # You can define the class to use on all collection wrappers. Defaulting to none.
 config.collection_wrapper_class = 'styled-radios'

希望这可以帮助某人:)

*使用宝石'simple_form'

于 2014-03-01T03:08:38.827 回答
1

使用更新的版本'simple_form', '~> 3.0.2'和Semantic UI 0.19.3，我使用以下代码实现了它。

class SemanticCheckBoxesInput < SimpleForm::Inputs::CollectionCheckBoxesInput
  def input
    label_method, value_method = detect_collection_methods
    options[:collection_wrapper_tag] = 'div'
    options[:collection_wrapper_class] = 'grouped inline fields'

    @builder.send("collection_check_boxes",
                  attribute_name, collection, value_method, label_method,
                  input_options, input_html_options, &collection_block_for_nested_boolean_style
    )
  end

  protected
  def item_wrapper_class
    "ui checkbox field"
  end
end

并且在视图中

= f.association :branches, as: :semantic_check_boxes

这是输出：

在此处输入图像描述

于 2014-10-01T10:07:19.540 回答