Bootstrap 3 + cases à cocher pour les formulaires simples
j'essaie d'intégrer bootstrap 3 avec simple_forms (de master).
aujourd'hui, j'ai le code suivant:
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/concevoir/sessions/nouveau.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"
mais le HTML généré est erroné. C'est bien selon BS2, mais mal pour BS3. Ici, il est:
<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>
Mais en fait il devrait être quelque chose comme:
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
il est probablement possible de réparer ce piratage autour des emballages, mais je ne peux pas le faire fonctionner. Quelqu'un peut me donner un conseil à ce sujet?
Cheers
6 réponses
Comme vous l'avez dit, vous pouvez le faire fonctionner avec un wrapper personnalisé:
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
auquel vous faites alors référence dans votre entrée:
= f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable?
Remarque cependant cela ne fonctionne pas pour collection_check_boxes:
= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: @employee_roles, label: false
Vous pouvez essayer de piratage ensemble personnalisé d'entrée pour le dernier cas, mais c'est un peu brouillon. Peut-être quelqu'un d'autre connaît une meilleure façon... et peut-être que simple_form rattrapera bootstrap 3 assez tôt.
la configuration suivante fonctionne parfaitement pour moi avec bootstrap 3:
SimpleForm.setup do |config|
...
config.boolean_style = :inline
...
end
personnalisé Simple 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
Utilisation:
= f.input :remember_me, :label => t('user.remember_me'), :as => :boolean, :wrapper => :inline_checkbox
j'ai trouvé une solution très simple pour les cases à cocher Bootstrap 3. En supposant que vous avez déjà configuré le Bootstrap 3 wrapper, tout ce que j'ai eu à faire est d'ajouter une entrée personnalisée dans app/inputscheckbox_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
et l'utiliser via:
= f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?
Cela va changer le css boolean sur le form-groupcheckbox au lieu de cela, qui obtiendra le style approprié.
de même, voici une version pour 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
Utilisé comme:
= f.label :frequency
= f.input :frequency, collection: @membership_plan.interval_frequencies, as: :radio_inline
voici un moyen rapide de corriger le problème de la case à cocher pendant que nous attendons que Rafael implémente Bootstrap3:https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master
assurez-vous d'ajouter "config.bootstrap3 = true" à votre initialiseur...
j'ai les exigences suivantes pour ma case à cocher:
<div class="checkbox">
<input type="hidden" value="0" name="...">
<label>
<input type="checkbox" value="1" name="..."> Label text
</label>
</div>
L'entrée cachée a été extraite de l'étiquette car elle ne coche pas la case sur le clic de l'étiquette. Je ne sais pas pourquoi mais je n'ai pas été capable de générer un tel html juste en utilisant config donc voici config + custom input class
# 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
Vous pouvez utiliser ceci:
<%= f.input :remember_me, as: :boolean, :label => false, :inline_label => "Remember me" if devise_mapping.rememberable? %>