[英]How to use Bootstrap's input group in simple_form gem
我遵循http://simple-form-bootstrap.plataformatec.com.br/examples/input_group 中的示例
我從<%= simple_form_for app, wrapper: :input_group do |f| %>
<%= simple_form_for app, wrapper: :input_group do |f| %>
並得到Couldn't find wrapper with name input_group
,所以我取消注釋
config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label, class: 'form-control-label'
b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
ba.optional :prepend
ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
ba.optional :append
end
b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
end
在simple_form_bootstrap.rb
並為類SimpleForm::Inputs::StringInput'
獲取undefined method
append' 。
關於這個<%= f.input :subdomain, append: "example.com" %>
我該如何使用它,它甚至支持 simple_form 嗎? 不知道他們為什么注釋掉那塊代碼。
創建config/initializers/simple_form_component.rb
module InputGroup
def prepend(wrapper_options = nil)
span_tag = content_tag(:span, options[:prepend], class: "input-group-text")
template.content_tag(:div, span_tag, class: "input-group-prepend")
end
def append(wrapper_options = nil)
span_tag = content_tag(:span, options[:append], class: "input-group-text")
template.content_tag(:div, span_tag, class: "input-group-append")
end
end
# Register the component in Simple Form.
SimpleForm.include_component(InputGroup)
如果有人想知道如何進行這項工作。 補充PGill的答案。 使用上面顯示的內容創建文件config/initializers/simple_form_component.rb
。
你應該去你的文件config/initializers/simple_form_bootstrap.rb
並在你要使用的輸入上添加這樣的東西:
b.wrapper :grid_wrapper, tag: 'div', class: 'input-group' do |ba|
ba.optional :prepend
ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: ''
ba.optional :append
# [...]
end
所以你的 input_wrapper 應該是這樣的:
config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label
b.wrapper :grid_wrapper, tag: 'div', class: 'input-group' do |ba|
ba.optional :prepend
ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: ''
ba.optional :append
ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
end
end
之后你可以在你的 erb 視圖上使用它,如下所示:
<%= f.input :attribute_name, prepend: "$" %>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.