Question

告诉我如何配置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

Answer 1

请尝试

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

Answer 2

更简单的方法是创建一个自定义的简单表单包装器。这是一篇博客文章，介绍了如何添加包装器：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 3

这就是我必须做的事情（接受的答案让我走上正轨，但没有完全解决问题）：

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

config.boolean_style = :nested

到

config.boolean_style = :inline

这可以防止Simple Form将输入标记包装在label标签中（实际上是在'.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();

使用simple_form的语义ui

3 个答案:

这是另一个选项（只修复一个复选框） -