2017-09-05 9 views
2

Bootstrap 4の積み重なったチェックボックス/ラジオに一致するsimple_formラッパーを作成しようとしています。Bootstrap 4のチェックボックスに一致するカスタムsimple_formラッパー

は、ここで私は複製したいHTML構造だ、Boostrap's docsの礼儀:私のsimple_formラッパーが現在立っている場所

<div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value=""> 
    Option one is this and that&mdash;be sure to include why it's great 
    </label> 
</div> 
<div class="form-check disabled"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="" disabled> 
    Option two is disabled 
    </label> 
</div> 

はここにあります:

config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.optional :readonly 
    b.use :label 
    b.use :input, class: "form-check-input" 
    b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' } 
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' } 
end 

そして、ここでは、現在出力HTML構造です:

<span class="checkbox"> 
    <label for=""> 
    <input class="form-check-input check_boxes optional" type="checkbox" value="" name="" id=""> 
    Text for checkbox goes here 
    </label> 
</span> 

答えて

2

source code、関連するオプションitem_wrapper_classitem_wrapper_labelがラッパーコンフィグに渡される必要があることがわかりました。

config.wrappers(:vertical_radio_and_checkboxes, tag: 'div', 
    class: 'form-group', 
    error_class: 'has-error', 
    item_wrapper_class: 'form-check', 
    item_label_class: 'form-check-label') do |b| 
    b.use :html5 
    b.optional :readonly 
    b.use :label, class: 'form-control-label' 
    b.use :input, class: 'form-check-input' 
    b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' } 
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' } 
end 
関連する問題