simple-form – Bootstrap 3 simple_forms复选框
发布时间:2020-12-18 00:19:34 所属栏目:安全 来源:网络整理
导读:我试图将bootstrap 3与simple_forms(从master)进行集成. 现在,我有以下几点: 配置/初始化/ simple_form.rb: SimpleForm.setup do |config| config.wrappers :default,class: :input,hint_class: :field_with_hint,error_class: :field_with_errors do |b|
|
我试图将bootstrap 3与simple_forms(从master)进行集成.
现在,我有以下几点: 配置/初始化/ 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,class: :error }
end
config.default_wrapper = :default
config.boolean_style = :nested
config.button_class = 'btn'
end
配置/初始化/ 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,class: "form-group",class: 'controls' do |input|
input.wrapper tag: 'div',class: 'input-prepend' do |prepend|
prepend.use :input
end
input.use :hint,class: 'help-block' }
input.use :error,class: 'help-inline' }
end
end
config.wrappers :append,class: 'input-append' do |append|
append.use :input
end
input.use :hint,class: 'help-inline' }
end
end
config.default_wrapper = :bootstrap
end
应用程序/视图/设计/会话/ 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"
但生成的HTML是错误的.那么,根据BS2是正确的,但BS3错了.这里是: <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>
但实际上应该是这样的: <div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
这可能是解决这个黑客围绕包装器,但我不能让它工作. 干杯 解决方法
就像你说的,你可以使用自定义包装器
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,class: "help-block text-danger" }
end
然后在您的输入中引用它: = f.input :remember_me,:as => :boolean,:wrapper => :checkbox if devise_mapping.rememberable? 请注意,这不适用于collect_check_boxes: = f.input :roles,as: :check_boxes,wrapper: :checkbox,collection: @employee_roles,label: false 您可以尝试将后一种情况下的自定义输入一起进行黑客攻击,但这有点混乱.也许别人知道一个更好的方法…也许simple_form将赶上足够的bootstrap 3. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
