Hộp kiểm Bootstrap 3 + simple_forms

Question

Tôi đang cố gắng tích hợp bootstrap 3 với simple_forms (từ chính).

Ngay bây giờ, tôi có như sau:

config/initializers/simple_form.rb:

SimpleForm.setup do |config| 
    config.wrappers :default, class: :input, 
    hint_class: :field_with_hint, error_class: :field_with_errors do |b| 
    b.use :html5 
    b.use :placeholder 
    b.optional :maxlength 
    b.optional :pattern 
    b.optional :min_max 
    b.optional :readonly 
    b.use :label_input 
    b.use :hint, wrap_with: { tag: :span, class: :hint } 
    b.use :error, wrap_with: { tag: :span, class: :error } 
    end 

    config.default_wrapper = :default 
    config.boolean_style = :nested 
    config.button_class = 'btn' 
end 

config/initializers/simple_form_bootstrap.rb:

SimpleForm.setup do |config| 
    config.input_class = 'form-control' 

    config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label 
    b.wrapper tag: 'div', class: 'controls' do |ba| 
     ba.use :input 
     ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 

    config.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label 
    b.wrapper tag: 'div', class: 'controls' do |input| 
     input.wrapper tag: 'div', class: 'input-prepend' do |prepend| 
     prepend.use :input 
     end 
     input.use :hint, wrap_with: { tag: 'span', class: 'help-block' } 
     input.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
    end 
    end 

    config.wrappers :append, tag: 'div', class: "form-group", error_class: 'error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label 
    b.wrapper tag: 'div', class: 'controls' do |input| 
     input.wrapper tag: 'div', class: 'input-append' do |append| 
     append.use :input 
     end 
     input.use :hint, wrap_with: { tag: 'span', class: 'help-block' } 
     input.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
    end 
    end 

    config.default_wrapper = :bootstrap 
end 

app/views/devise/sessions/new.html.haml

%div.panel.panel-auth 
    %div.panel-heading 
    %h3.panel-title Sign in 
    %div.panel-body 
    = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| 
     .form-inputs 
     = f.input :email, :required => false, :autofocus => true 
     = f.input :password, :required => false 
     = f.input :remember_me, :as => :boolean if devise_mapping.rememberable? 
     .form-actions 
     = f.button :submit, "Sign in" 
     %hr 
    = render "devise/shared/links" 

Nhưng HTML được tạo là sai. Vâng, nó đúng theo BS2, nhưng sai với BS3. Ở đây là:

<div class="form-group boolean optional user_remember_me"> 
    <label class="boolean optional control-label" for="user_remember_me"> 
    Remember me 
    </label> 
    <div class="controls"> 
    <input name="user[remember_me]" type="hidden" value="0"> 
    <label class="checkbox"> 
     <input class="boolean optional form-control" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> 
    </label> 
    </div> 
</div> 

Nhưng nó thực sự cần được điều gì đó như:

<div class="checkbox"> 
    <label> 
     <input type="checkbox"> Check me out 
    </label> 
    </div> 

Đây có thể là có thể khắc phục điều này hacking xung quanh hàm bao, nhưng tôi không thể làm cho nó làm việc. Ai đó có thể cho tôi một số lời khuyên về điều đó không?

Cheers

Answer 1

Giống như bạn nói, bạn có thể lấy nó làm việc với một wrapper tùy chỉnh:

config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b| 

    # Form extensions 
    b.use :html5 

    # Form components 
    b.wrapper tag: :label do |ba| 
     ba.use :input 
     ba.use :label_text 
    end 

    b.use :hint, wrap_with: { tag: :p, class: "help-block" } 
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" } 
    end 

Mà bạn thì tham khảo ở đầu vào của bạn:

= f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable? 

Lưu ý tuy nhiên won này' t làm việc cho collection_check_boxes:

= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: @employee_roles, label: false 

Bạn có thể thử hack cùng một đầu vào tùy chỉnh cho trường hợp thứ hai, nhưng nó hơi lộn xộn một chút. Có lẽ ai đó khác biết một cách tốt hơn ... và có lẽ simple_form sẽ bắt kịp với bootstrap 3 sớm đủ.

Answer 2

Dưới đây là một cách nhanh chóng để khắc phục vấn đề ô trống trong khi chúng tôi chờ đợi Rafael để thực hiện Bootstrap3: https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master

Hãy chắc chắn rằng bạn thêm "config.bootstrap3 = true" để khởi tạo của bạn ...

Answer 3

cấu hình Tiếp theo hoạt động hoàn hảo cho tôi với bootstrap 3:

SimpleForm.setup do |config| 
    ... 
    config.boolean_style = :inline 
    ... 
end 

Simple wrapper tùy chỉnh

config.wrappers :inline_checkbox, :tag => 'div', :class => 'checkbox', :error_class => 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label_input 
end 

Cách sử dụng:

= f.input :remember_me, :label => t('user.remember_me'), :as => :boolean, :wrapper => :inline_checkbox 

Answer 4

tôi có những yêu cầu tiếp theo cho hộp kiểm của tôi:

<div class="checkbox"> 
    <input type="hidden" value="0" name="..."> 
    <label> 
     <input type="checkbox" value="1" name="..."> Label text 
    </label> 
</div> 

Đầu vào bị ẩn được trích xuất từ ​​nhãn vì nó không chọn hộp kiểm khi nhấp vào nhãn. Tôi không biết tại sao nhưng tôi đã không thể tạo ra html như chỉ sử dụng cấu hình như vậy ở đây là cấu hình + tùy chỉnh lớp đầu vào

# Config 
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b| 
    # Form extensions 
    b.use :html5 
    b.use :placeholder 

    b.use :input 

    b.use :hint, wrap_with: { tag: :p, class: "help-block" } 
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" } 
end 

# Input goes to app/inputs/inline_checkbox_input.rb 
class InlineCheckboxInput < SimpleForm::Inputs::Base 
    def input 
    out = '' 
    out << @builder.hidden_field(attribute_name, value: 0).html_safe 
    out << "<label>" 
    out << @builder.check_box(attribute_name, {}, 1, nil) 
    out << "#{options[:label]}</label>" 
    out 
    end 
end 

# Usage 
= f.input :name, :label => 'Label text', :wrapper => :checkbox, :as => :inline_checkbox 

Answer 5

Bạn chỉ có thể sử dụng này:

<%= f.input :remember_me, as: :boolean, :label => false, :inline_label => "Remember me" if devise_mapping.rememberable? %> 

Answer 6

Tôi tìm thấy một thực sự đơn giản giải pháp cho các hộp kiểm Bootstrap 3. Giả sử bạn đã có bootstrap 3 wrapper cấu hình, tất cả tôi phải làm là thêm một đầu vào tùy chỉnh trong app/inputs như checkbox_input.rb:

class CheckboxInput < SimpleForm::Inputs::BooleanInput 
    # this exists to make the default 'boolean' css class in the form-group to be 'checkbox' instead 
end 

và sử dụng nó thông qua: = f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?

này sẽ thay đổi css boolean trên thay vào đó, form-group sẽ là checkbox, sẽ tạo kiểu tóc phù hợp.

Tương tự như vậy, đây là một phiên bản dành cho radio-inline

class RadioInlineInput < SimpleForm::Inputs::CollectionRadioButtonsInput 

    # by default, this omits labels. You should use f.label before this to stick a label where you would like. 
    def initialize(builder, attribute_name, column, input_type, options = {}) 
    super(builder, attribute_name, column, :radio_buttons, {label: false}.merge(options)) 
    end 

    def item_wrapper_class 
    'radio-inline' 
    end 
end 

Được sử dụng như:

= f.label :frequency 
= f.input :frequency, collection: @membership_plan.interval_frequencies, as: :radio_inline