4

如 Twitter Bootstrap 的文档中所述，我正在尝试为一个复选框获取两个标签。（参见http://twitter.github.com/bootstrap/base-css.html#forms --> 水平表单 --> 复选框（在文本输入下方））

所以我想要显示的是左侧描述的标签、复选框本身以及右侧旁边的提示。

simple_form gem 中 twitter bootstrap 的标准实现创建了一个<p>用于显示提示的标签，因为它试图对所有类型的输入保持一致。

我现在想在 simple_form 初始化程序中为“引导复选框”创建一个自定义包装器，但我无法弄清楚如何解决这个问题。

这就是我目前使用裸轨（erb）实现它的方式：

<div class="control-group">
 <%= f.label :recurring, :class => 'control-label' %>
 <div class="controls">
   <%= f.label :recurring, :class => 'checkbox' do %>
    <%= f.check_box :recurring %>
    <%= t('.recurring_hint') %>
   <% end %>
 </div>
</div>

你能帮我或者至少试着解释一下这些自定义包装器是如何工作的吗？谢谢！

编辑：让我更准确地问我的问题：我可以使用 simple_form 的包装器 API 来使用标签作为包装器吗？

4

3 回答 3

4

解决方案：

  1. 更新到最新版本的 simple_form（2.0.2，有 2.0）
  2. 覆盖布尔输入：

应用程序/输入/boolean_input.rb

class BooleanInput < SimpleForm::Inputs::BooleanInput
  def input
    if nested_boolean_style?
        template.label_tag(nil, :class => "checkbox") {
          build_check_box + inline_label
        }
    else
      build_check_box
    end
  end
end

_form.html.erb

调用模板：

<%= f.input :recurring, :inline_label => t('.recurring_hint') %>
于 2012-06-12T19:38:31.917 回答
1

使用最新的 simple_form，该选项开箱即用。

于 2012-09-09T08:08:17.513 回答
0

您可以使用引导支持安装 simple_form，因此您不需要编写控制组等包装器。

在安装时检查此链接： https ://github.com/plataformatec/simple_form#twitter-bootstrap

您需要做的就是运行以下命令：

rails generate simple_form:install --bootstrap

在此页面中，您可以看到一些示例，包括带有 bootstrap 和 simple_form 的水平复选框：http ://simple-form-b​​ootstrap.plataformatec.com.br/articles/new

如果您真的想按照您的方式使用它，您需要在标签上添加“内联”类以及“复选框”。

于 2012-06-12T01:55:18.413 回答