如何在simple_form gem中使用Bootstrap的输入组

Question

环境

Ruby2.5.1
Rails 5.2.1
简单表格 4.0.1

当前行为

我按照 http://simple-form-bootstrap.plataformatec.com.br/examples/input_group

中的示例

我从 <%= 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

并为 class SimpleForm::Inputs::StringInput' 获取 undefined methodappend'。

关于这个的问题<%= f.input :subdomain, append: "example.com" %>

我该如何使用它，它是否支持 simple_form？不知道他们为什么把那段代码注释掉。

Answer 1

创建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)

Source

Answer 2

万一有人想知道如何进行这项工作。补充 PGill's 答案。创建文件后 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: "$" %>

如何在simple_form gem中使用Bootstrap的输入组

How to use Bootstrap's input group in simple_form gem

ruby-on-rails

simple-form

simple-form-for

环境

当前行为