13

I'm trying to integrate bootstrap 3 with simple_forms (from master).

Right now, I have the following:

config/initializers/simple_form.rb:

SimpleForm.setup do |config|
  config.wrappers :default, class: :input,
    hint_class: :field_with_hint, error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label_input
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
  end

  config.default_wrapper = :default
  config.boolean_style = :nested
  config.button_class = 'btn'
end

config/initializers/simple_form_bootstrap.rb:

SimpleForm.setup do |config|
  config.input_class = 'form-control'

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

  config.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.wrappers :append, tag: 'div', class: "form-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-append' do |append|
        append.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.default_wrapper = :bootstrap
end

app/views/devise/sessions/new.html.haml

%div.panel.panel-auth
  %div.panel-heading
    %h3.panel-title Sign in
  %div.panel-body
    = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
      .form-inputs
        = f.input :email, :required => false, :autofocus => true
        = f.input :password, :required => false
        = f.input :remember_me, :as => :boolean if devise_mapping.rememberable?
      .form-actions
        = f.button :submit, "Sign in"
      %hr
    = render "devise/shared/links"

But the generated HTML is wrong. Well, it's right according to BS2, but wrong to BS3. Here it is:

<div class="form-group boolean optional user_remember_me">
  <label class="boolean optional control-label" for="user_remember_me">
    Remember me
  </label>
  <div class="controls">
    <input name="user[remember_me]" type="hidden" value="0">
    <label class="checkbox">
      <input class="boolean optional form-control" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
    </label>
  </div>
</div>

But it actually should be something like:

  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>

It's probably possible to fix this hacking around wrappers, but I can't get it working. Can someone give me some advice about that?

Cheers

4

6 回答 6

12

就像你说的，你可以让它使用自定义包装器：

 config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|

    # Form extensions
    b.use :html5

    # Form components
    b.wrapper tag: :label do |ba|
      ba.use :input
      ba.use :label_text
    end

    b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
  end

然后您在输入中引用：

 = f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable?

但是请注意，这不适用于 collection_check_boxes：

= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: @employee_roles, label: false

您可以尝试将后一种情况的自定义输入组合在一起，但这有点混乱。也许其他人知道更好的方法……也许 simple_form 很快就会赶上 bootstrap 3。

于 2013-09-04T18:52:33.663 回答
2

下一个配置对我来说非常适合 bootstrap 3：

SimpleForm.setup do |config|
  ...
  config.boolean_style = :inline
  ...
end

简单的自定义包装器

config.wrappers :inline_checkbox, :tag => 'div', :class => 'checkbox', :error_class => 'has-error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label_input
end

用法：

= f.input :remember_me, :label => t('user.remember_me'), :as => :boolean, :wrapper => :inline_checkbox
于 2013-10-08T11:45:53.433 回答
1

我为 Bootstrap 3 复选框找到了一个非常简单的解决方案。假设您已经配置了 bootstrap 3 包装器，我所要做的就是在app/inputsas中添加一个自定义输入checkbox_input.rb：

class CheckboxInput < SimpleForm::Inputs::BooleanInput
  # this exists to make the default 'boolean' css class in the form-group to be 'checkbox' instead
end

并通过以下方式使用它： = f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?

boolean这将改为将 css 更改为form-group，checkbox这将获得正确的样式。

同样，这里有一个版本radio-inline

class RadioInlineInput < SimpleForm::Inputs::CollectionRadioButtonsInput

  # by default, this omits labels.  You should use f.label before this to stick a label where you would like.
  def initialize(builder, attribute_name, column, input_type, options = {})
    super(builder, attribute_name, column, :radio_buttons, {label: false}.merge(options))
  end

  def item_wrapper_class
    'radio-inline'
  end
end

用作：

= f.label :frequency
= f.input :frequency, collection: @membership_plan.interval_frequencies, as: :radio_inline
于 2014-12-19T17:53:39.213 回答
0

我的复选框有下一个要求：

<div class="checkbox">
    <input type="hidden" value="0" name="...">
    <label>
        <input type="checkbox" value="1" name="..."> Label text
    </label>
</div>

隐藏输入是从标签中提取的，因为它没有选中标签单击时的复选框。我不知道为什么，但我无法仅使用 config 生成这样的 html，所以这里是 config + 自定义输入类

# Config
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|
  # Form extensions
  b.use :html5
  b.use :placeholder

  b.use :input

  b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
  b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
end

# Input goes to app/inputs/inline_checkbox_input.rb
class InlineCheckboxInput < SimpleForm::Inputs::Base
  def input
    out = ''
    out << @builder.hidden_field(attribute_name, value: 0).html_safe
    out << "<label>"
    out << @builder.check_box(attribute_name, {}, 1, nil)
    out << "#{options[:label]}</label>"
    out
  end
end

# Usage
= f.input :name, :label => 'Label text', :wrapper => :checkbox, :as => :inline_checkbox
于 2014-03-22T13:31:35.807 回答
0

这是在我们等待 Rafael 实施 Bootstrap3 时修复复选框问题的快速方法：https ://github.com/wtfiwtz/simple_form_bootstrap3/commits/master

确保将“config.bootstrap3 = true”添加到初始化程序...

于 2013-09-27T01:12:08.737 回答
0

你可以使用这个：

<%= f.input :remember_me, as: :boolean, :label => false, :inline_label => "Remember me" if devise_mapping.rememberable? %>
于 2014-05-03T16:18:27.790 回答