8

simple_form をhttp://semantic-ui.com/構文で機能させるために、このラジオ ボタンの HTML シーケンスを simple_form で再現したいと思います。

  <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

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 に答える