带有 simple_form 的语义 ui

Question

告诉我如何配置 simple_form。我想用语义ui的checkbox，但是当我在class中wrap checkbox的时候，他就激活了，也就是视觉上是，但是当你点击checkbox的时候是没有激活的。

    = 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

Answer 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

Answer 2

这是我必须做的（接受的答案让我走上了正确的道路，但并没有完全解决问题）：

在config/initializers/simple_form.rb文件中，更改

config.boolean_style = :nested

到

config.boolean_style = :inline

这可以防止 Simple Form 将输入标签包装在标签标签中（本质上是在 '.ui .checkbox' div 和输入之间插入标签，这会破坏 Semantic 的复选框功能）。

在 app/assets/javascripts/application.js 文件中：

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

我的表单现在可以正确显示复选框并在提交时传递适当的值。

---

这是另一种选择（仅修复一个复选框）-

在 _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();

Answer 3

请尝试一下

= f.input :remember_me, as: :boolean, boolean_style: :inline