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 将 input 标记包装在 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();
于 2015-11-17T23:44:52.380 回答