Bootstrap 3 + znaki proste_formularz

Question

Próbuję zintegrować bootstrap 3 z simple_forms (z master).

Teraz mam następujące:

config/inicjalizatory/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/inicjalizatory/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" 

Ale wygenerowany kod HTML jest nieprawidłowy. Cóż, to prawda, zgodnie z BS2, ale nie tak do BS3. Oto ona:

<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> 

Ale to faktycznie powinno być coś takiego:

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

To chyba możliwe, aby rozwiązać ten problem hacking wokół opakowania, ale nie mogę dostać pracy. Czy ktoś może mi doradzić?

Cheers

Answer 1

Tak jak powiedziałeś, można dostać pracy z niestandardowym opakowaniu jednostkowym:

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 

które następnie odwoływać się w Twój wkład:

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

Uwaga jednak to won” t działa dla collection_check_boxes:

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

Możesz spróbować zhakować niestandardowe dane wejściowe dla tego ostatniego przypadku, ale jest trochę niechlujnie. Być może ktoś inny zna lepszy sposób ... a może simple_form szybko dogoni bootstrap 3.

Answer 2

Oto szybki sposób rozwiązać problem checkbox podczas gdy czekamy na Rafael wdrożyć Bootstrap3: https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master

upewnij się dodać „config.bootstrap3 = true” do inicjatora ...

Answer 3

Następny konfiguracja działa idealnie dla mnie z bootstrap 3:

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

Prosty zwyczaj wrapper

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 

Zastosowanie:

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

Answer 4

Mam następujące wymagania dla mojego wyboru:

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

Ukryte dane wejściowe zostały wyodrębnione z etykiety, ponieważ nie zaznaczono pola wyboru przy kliknięciu etykiety. Nie wiem dlaczego, ale nie byłem w stanie wygenerować takiego html tylko przy użyciu config więc tutaj jest config + niestandardowej klasy wejściowy

# 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

można po prostu użyć tego:

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

Answer 6

znalazłem bardzo prosty rozwiązanie dla pól Bootstrap 3. Zakładając, że masz już bootstrap 3 wrapper skonfigurowany, wszystko, co musiałem zrobić, to dodać wkład własny w app/inputs jak 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 

i użyć go poprzez: = f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?

Spowoduje to zmianę css boolean na zamiast tego będzie można uzyskać styl.

Podobnie tutaj jest wersja dla 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 

Używany jako:

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