Cases à cocher Bootstrap 3 + simple_forms
Je suis en train d'intégrer bootstrap 3 avec simple_forms (de maître).
Droit maintenant, j'ai le texte 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 code HTML généré est faux. Eh bien, c'est juste selon BS2, mais à tort 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 il devrait être quelque chose comme:
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
Il est probablement possible de corriger ce piratage autour de wrappers, mais je ne peux pas le faire fonctionner.
Quelqu'un peut-il me donner quelques conseils à ce sujet?
Acclamations
source d'informationauteur caarlos0
Vous devez vous connecter pour publier un commentaire.
Comme vous l'avez dit, vous pouvez le faire fonctionner avec un wrapper personnalisé:
Qui vous puis la référence de votre entrée:
Note cependant cela ne fonctionne pas pour collection_check_boxes:
Vous pourriez 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 simple_form va rattraper son retard avec bootstrap 3 assez vite.
De configuration suivant fonctionne parfaitement pour moi avec bootstrap 3:
Simple wrapper personnalisé
Utilisation:
J'ai trouvé un vraiment de solution simple pour Bootstrap 3 cases. En supposant que vous avez déjà le bootstrap 3 wrapper configuré, tout ce que j'avais à faire est d'ajouter une entrée personnalisé dans
app/inputs
commecheckbox_input.rb
:et l'utiliser via:
= f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?
Cela va changer le css
boolean
sur leform-group
êtrecheckbox
au lieu de cela, ce qui permettra d'obtenir le bon style.De même, ici est une version pour
radio-inline
Utilisé comme:
Voici un moyen rapide pour fixer la case en question alors que nous attendons pour Rafael à mettre en œuvre Bootstrap3: https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master
Assurez-vous d'ajouter "config.bootstrap3 = true" à votre initialiseur...
J'ai à côté des exigences pour ma case:
Caché entrée a été extrait à partir de l'étiquette, car elle ne cochez pas la case sur l'étiquette, cliquez sur. Je ne sais pas pourquoi, mais je n'étais pas en mesure de produire de telles html juste à l'aide de config voici donc la config + entrée personnalisé de classe
Vous pouvez utiliser seulement ceci: