13

ブートストラップ 3 を simple_forms (マスターから) と統合しようとしています。

現在、私は次のものを持っています：

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"

しかし、生成された HTML は間違っています。BS2なら正しいけど、BS3なら間違い。ここにあります：

<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>

しかし、実際には次のようになります。

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

ラッパーに関するこのハッキングを修正することはおそらく可能ですが、うまくいきません。誰かが私にそれについて何かアドバイスをくれますか?

乾杯

4

6 に答える 6

2

次の構成は、ブートストラップ 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 チェックボックスの非常に簡単な解決策を見つけました。ブートストラップ 3 ラッパーが既に構成されていると仮定すると、次のようにカスタム入力を追加するだけで済みapp/inputsます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?

これにより、代わりに の css が変更さbooleanれ、適切なスタイリングが得られます。form-groupcheckbox

同様に、ここにバージョンがあります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

Rafael がBootstrap3を実装するのを待つ間、チェックボックスの問題を修正する簡単な方法を次に示します。

イニシャライザに「config.bootstrap3 = true」を追加してください...

于 2013-09-27T01:12:08.737 に答える