如何在 simple_form 2 的包装器中将类添加到输入组件

Question

当我在 simple_form 2.0.0.rc 中使用名为 :hinted 的自定义包装器时，我试图在我的输入字段中添加 class="text"

config.wrappers :hinted do |b|
  b.use :input, :class => "text"
end

但是输出没有那个类，我试过了

:wrap_with => {:class => 'text'} 

无济于事

有人知道这是怎么做到的吗？

谢谢！

Answer 1

使用 :input_html 有效。它有点笨拙。

= f.input :email, :input_html => { :class => 'foo' }

您还可以在所有表​​单元素上设置所有输入：

simple_form_for(@user, :defaults => { :input_html => { :class => "foo" } })

但正如您所料，这适用于所有事情。

您可以创建自定义表单元素：

# app/inputs/foo_input.rb
class FooInput < SimpleForm::Inputs::StringInput
  def input_html_classes
    super.push('foo')
  end
end

// in your view:
= f.input :email, :as => :foo

见：https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components

您还可以创建自定义表单构建器：

def custom_form_for(object, *args, &block)
  options = args.extract_options!
  simple_form_for(object, *(args << options.merge(builder: CustomFormBuilder)), &block)
end

class CustomFormBuilder < SimpleForm::FormBuilder
  def input(attribute_name, options = {}, &block)
    options[:input_html].merge! class: 'foo'
    super
  end
end

Answer 2

目前没有办法做到这一点。如果需要，您可以使用像这样的defaults 选项。

<%= simple_form_for(@user, :defaults => { :input_html => { :class => "text" } }) do %>
  <%= f.input :name %>
<% end %>

Answer 3

此功能即将合并到 master 中（2012 年 10 月）：

https://github.com/plataformatec/simple_form/pull/622

然后你可以这样做直接在输入字段上添加 HTML 属性：

SimpleForm.build :tag => :div, :class => "custom_wrapper" do |b|
  b.wrapper :tag => :div, :class => 'elem' do |component|
    component.use :input, :class => ['input_class_yo', 'other_class_yo']
    component.use :label, :"data-yo" => 'yo'
    component.use :label_input, :class => 'both_yo'
    component.use :custom_component, :class => 'custom_yo'
  end
end

Answer 4

我也遇到过类似的问题，不过这个功能（input_class）似乎是在 3.0.0 版本之后合并的。

所以我尝试制作一个至少支持config.input_class = 'foo' 代码的猴子补丁

我的意图不是做一个伟大的猴子补丁（事实上我喜欢这篇文章here 这样做 - 猴子补丁），这只是一个想法，但它有效，现在我正在使用 SimpleForm v2.1.3 和 Bootstrap 4 - alpha 版本（最后一个在这里并不重要，但仅供参考）

这是猴子补丁的代码：

module SimpleForm
  mattr_accessor :input_class
  @@input_class = nil
end
module SimpleForm
  module Inputs
    class Base
      def html_options_for(namespace, css_classes)
        html_options = options[:"#{namespace}_html"]
        html_options = html_options ? html_options.dup : {}
        css_classes << html_options[:class] if html_options.key?(:class)
        css_classes << SimpleForm.input_class if namespace == :input && SimpleForm.input_class.present?
        html_options[:class] = css_classes unless css_classes.empty?
        html_options
      end
    end
  end
end

现在你可以这样做了：

SimpleForm.setup do |config|
  # ...
  config.input_class = 'foo'
  #...
end

Answer 5

您可以在 simple_form 初始化程序中进行设置：

config.input_class= 'foo'

它对我有用:)