2

simple_form の設定方法を教えてください。セマンティックUIのチェックボックスを使いたいのですが、クラスでチェックボックスをラップすると、視覚的にはアクティブになりますが、チェックボックスをクリックしてもアクティブになりません。

    = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
     .ui.three.column.middle.aligned.relaxed.grid.basic.segment
       .column
       .column
       .column
         .ui.form.segment
           #marg.field= f.label :email, 'Email'
           #marg.field=f.input :email, placeholder: 'Email', autofocus: true, label: false
           #marg.field= f.label :password, 'Пароль'
           = f.input :password, :required => false, placeholder: 'Пароль', label: false
           #marg.ui.toggle.checkbox
             = f.input :remember_me, as: :boolean if devise_mapping.rememberable?
           #marg= f.button :submit, 'Войти!', class: 'small ui blue submit button'

http://i.imgur.com/C8Wn4K9.png

4

3 に答える 3

1

試してみてください

= f.input :remember_me, as: :boolean, boolean_style: :inline
于 2013-12-25T12:28:06.860 に答える
1

これを行うより簡単な方法は、カスタムの単純なフォーム ラッパーを作成することです。ラッパーを追加する方法を説明するブログ投稿は次のとおりです: http://pranavsingh.me/semantic-ui-simple-form-wrapper/

上記の構成は、すべての必須クラスのセマンティック フォーム クラスを自動的に追加し、適切なチェックボックス フィールドを作成するためのラッパーも追加します。以下に例を示します。

= f.input :published, label: "Published?",
hint: "If you are not ready to go live yet, keep this site unpublished.",
wrapper: :ui_toggle_checkbox
于 2017-05-15T07:17:49.337 に答える
0

これが私がしなければならなかったことです（受け入れられた答えは私を正しい軌道に乗せましたが、問題を完全には修正しませんでした）：

config/initializers/simple_form.rbファイルで、

config.boolean_style = :nested

に

config.boolean_style = :inline

これにより、Simple Form が label タグで input タグをラップするのを防ぎます (本質的に '.ui .checkbox' div と入力の間にタグを挿入し、セマンティックのチェックボックス機能を壊します)。

app/assets/javascripts/application.jsファイル内:

$('.ui.checkbox').find('input').checkbox();

私のフォームはチェックボックスを正しく表示し、送信時に適切な値を渡すようになりました。

ここに別のオプションがあります（1つのチェックボックスを修正するだけです）-

_form.html.erbパーシャルでは:

<div class="inline field">
  <div class="ui checkbox">
    <%= my_form.input :my_input, label: 'My Label', as: :boolean, boolean_style: :inline %>
  </div>
</div>

application.jsファイル内:

$('.ui.checkbox').find('input').checkbox();
于 2015-11-17T23:44:52.380 に答える