Question

我正在使用Simple Form并试图找出我如何设置select字段的样式，就像我设计其余部分一样。我似乎无法在网上找到任何东西。我想要的是避免任何需要在每个表单中指定包装器名称，但将其链接到默认样式 - 无论是关联，简单的下拉，只要它是一个选择它应采取该样式。

这是我当前的初始化文件（simple_form_bootstrap.rb）：

SimpleForm.setup do |config|
  config.wrappers :bootstrap_form_horizontal, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: :div, class: 'col-xs-9' do |ba|
      ba.use :input
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
      ba.use :error, wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.form_class = 'form-horizontal'
  config.label_class = 'control-label col-xs-3'
  config.button_class = 'btn btn-primary btn-lg'
  config.error_notification_tag = :div
  config.error_notification_class = 'alert alert-danger'
  config.wrapper_mappings = { :boolean => :checkbox }

  config.wrappers :checkbox, tag: :div, class: "col-xs-offset-3 col-xs-9", error_class: "has-error" do |b|
    b.use :html5
    b.wrapper tag: :div, class: "checkbox" do |ba|
      ba.use :input
    end
    b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
    b.use :error, wrap_with: { tag: :span, class: "help-block" }
  end

  config.wrappers :select, tag: :div, class: "col-xs-6", error_class: "has-error" do |b|
    b.use :html5
    b.wrapper tag: :div, class: "form-control" do |ba|
      ba.use :select
    end
    b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
    b.use :error, wrap_with: { tag: :span, class: "help-block" }
  end

  # Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
  # Check the Bootstrap docs (http://twitter.github.com/bootstrap)
  # to learn about the different styles for forms and inputs,
  # buttons and other elements.
  config.default_wrapper = :bootstrap_form_horizontal
end

基本上，以config.wrappers :select开头的部分是我正在尝试所有内容以获取它的地方。

有什么想法吗？谢谢！

Answer 1

这不是真正精心设计的方法。包装材料仅用于元素排列，即用于指定其位置。

要使用自定义HTML代码定义自己的样式元素，请使用类Input。例如：

class CheckboxInput < SimpleForm::Inputs::BooleanInput
  def input
    # do whatever you want, for instance push your own class
    html_options = label_html_options.dup
    html_options[:class] ||= []
    html_options[:class].push('ui-checkbox')
    @builder.label(label_target, html_options) {
      build_check_box_without_hidden_field + template.tag(:span).html_safe
    }
  end
end

将此类放在app/inputs目录下。在你的情况下，它会像MySelectInput。

这是对Adding custom input components的解释。在github上试用可用的简单表单输入 - https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/inputs。

我不确定，但这https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/inputs/collection_select_input.rb可能就是你要找的。

以这种方式嵌套输入类，你可以重新定义你想要的任何东西。

要使用此自定义输入，请写：

= simple_form_for @user, html: { class: 'form-horizontal' } do |f|
  = f.input :locked, as: :checkbox_input, wrapper: :inline
  # if you have this `inline` wrapper, of course

如果您的班级名称为MySelectClass，则会突出显示输入名称 - :my_select_class。

请记住，包装器本身不是输入。所有输入都很常见。

希望它有所帮助！

Rails简单形式的Bootstrap 3下拉列表的自定义包装器

1 个答案: