0

有谁知道如何为bootstrap-switch编写simple_form包装器？

生成的 HTML 需要如下所示：

<div class="control-group">
  <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
</div>
4

3 回答 3

2

我看不到您将如何将引导开关脚本用于文本字段。尽管如此，有些人最终可能会遇到与标题中提出的问题相同的问题。

您可以简单地复制引导包装器并添加所需的类：

config.wrappers :bootstrap_switch, tag: 'div', class: "control-group", error_class: 'error', boolean_style: :inline do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.wrapper tag: 'div', class: 'controls' do |ba|
    ba.wrapper "switch", tag: 'div', class: 'switch' do |s|
      s.use :input
    end
    ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
end

这将创建一个具有“switch”类的嵌套 div（因此可由脚本设置样式）。这个内部包装器具有命名空间“switch”，它使我们能够设置一些选项：

f.input :inputField, :wrapper => :bootstrap_switch, :switch_html => { :data => { on: "success", on_label: "<i class='icon-ok icon-white'></i>", off: "warning", off_label: "<i class='icon-remove'></i>" } }
于 2013-07-24T17:45:53.480 回答
0

简单表单示例应用程序现在具有以下代码。

  # custom input switch for boolean
  config.wrappers :custom_boolean_switch, tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :form_check_wrapper, tag: 'div', class: 'custom-control custom-switch' do |bb|
      bb.use :input, class: 'custom-control-input', error_class: 'is-invalid', valid_class: 'is-valid'
      bb.use :label, class: 'custom-control-label'
      bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
      bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

用法是

<%= f.input :terms, wrapper: :custom_boolean_switch %>
于 2020-12-10T11:00:42.223 回答
-3

simple_form 内置了一个引导插件。在这里查看。

于 2013-07-15T00:19:42.123 回答