将Bootstrap属性添加到R​​ails简单表单输入

The following form snippet is a boolean so is styled as a checkbox:

以下表单片段是一个布尔值,因此被设置为一个复选框:

= form.input :recur, label: "Recurring"

I need two things:
1) to style it as a bootstrap button rather than a checkbox
2) add data-target and data-toggle attributes

我需要两件事:1)将其设计为引导按钮而不是复选框2)添加数据目标和数据切换属性

This is the HTML code I need to add to the form for button styling and collapse functionality and I'm having a hard time figuring out the right syntax for Simple Form (I'm using SLIM):

这是我需要添加到按钮样式和折叠功能的表单的HTML代码,我很难找到Simple Form的正确语法(我正在使用SLIM):

<button class="btn btn-default" data-toggle="collapse" data-target="#recurringGift" type="button">
</button>

Any advice would be appreciated!

任何意见,将不胜感激!

2 个解决方案

#1

1) With simple form, you can pass in options to the input, label, and wrapper. I would style the label to use button classes, and set display: none on the input itself, since clicking the label will also select the checkbox.

1)使用简单的表单,您可以将选项传递给输入,标签和包装器。我会将标签设置为使用按钮类,并在输入本身上设置display:none,因为单击标签也会选中该复选框。

eg.

= f.input_field :some_checkbox, input_html: { style: "display: none"}, label_html: { class: "btn btn-primary"}

Even better, you can put the checkbox before the label, so you can use the :checked pseudoclass to affect the label's style:

更好的是,您可以将复选框放在标签之前,这样您就可以使用:checked伪类来影响标签的样式:

= f.input_field :some_checkbox, input_html: { style: "display: none"}
= f.label :some_checkbox, class: "btn btn-primary"

Then in your CSS you can declare: input:checked + label { background-color: grey; }

然后在CSS中你可以声明:input:checked + label {background-color:grey; }

eg. http://codepen.io/anon/pen/doqZyp

2) You can pass data attributes with a data: {} hash, eg.

2)您可以使用数据传递数据属性:{}哈希,例如。

= f.input_field :some_checkbox, input_html: { style: "display: none"}, data: {target: "#recurringGift", toggle: "collapse"}

Be advised that you convention requires that data-attributes use hyphens to separate words (eg. data-some-attribute=""), but rails will want underscores (eg. data: {some_attribute: ""}

请注意,您的约定要求数据属性使用连字符来分隔单词(例如,data-some-attribute =“”),但rails会想要下划线(例如,data:{some_attribute:“”}

#2

You should be able to add them as attributes by adding them to the options object:

您应该能够通过将它们添加到选项对象来将它们添加为属性:

= form.input :recur, label => "Recurring", 'data-toggle' => "collapse", 'data-target' => '#recurringGift'

Note that you must use quotes around attributes with dashes, since they aren't allowed in symbols. Also note the hash rocket notation. You can not use the colon notation when a key is a string

请注意,必须在带有破折号的属性周围使用引号,因为符号中不允许使用它们。还要注意哈希火箭表示法。当键是字符串时,不能使用冒号表示法