将一个CSS类添加到<%= f.submit %>

Question

我的问题很简单：

<%= f.submit %>

类声明应该放在哪里？我尝试了多种方法但始终出错。

- sscirrus

---

另请参阅https://dev59.com/gmoy5IYBdhLWcg3wCpsz - Naoise Golden

Answer 1

<%= f.submit 'name of button here', :class => 'submit_class_name_here' %>

这应该会起作用。如果你遇到了错误，很可能是因为你没有提供名字。

或者，你可以在不使用类的情况下样式化该按钮：

form#form_id_here input[type=submit]

也试试这个。

- Srdjan Pejic

---

太好了！谢谢Srdjan。有一个小问题 - 我尝试在这些提交按钮上使用disable_with，但它们似乎从未起作用。你知道原因吗？+1 - sscirrus

尝试使用哈希表来设置选项：{:class => 'class_name', :disable_with => '编辑中...'}。这个哈希表要放在按钮名称之后。这应该会起作用，至少文档上是这样写的。 - Srdjan Pejic

请注意，为了使用上面答案中的 :class 哈希表，您需要明确将一个字符串（'name of button here'）作为 submit 的第一个参数传递。如果没有该字符串，您将收到一个错误消息。请注意不要改变原文意思。 - thewillcole

如何在不移除默认值的情况下添加一个类？答案在这里：https://dev59.com/gmoy5IYBdhLWcg3wCpsz - Naoise Golden

如果您不想使用名称，<%= form.submit :class => 'class_name' %>就可以工作。 - user6451184

"如果你没有提供名称，那么很有可能会出现这种情况。" 没错。但是为什么在定义类时名称是必须的呢？ - Onur

Answer 2

您可以通过以下方式向表单的提交按钮添加类声明： <%= f.submit class: 'btn btn-default' %> <-- 注意：不要有逗号！

如果您要更改脚手架的 _form.html.erb 部分，并希望在控制器操作之间保留按钮名称的动态更改，请勿指定名称 'name'。

未指定名称并取决于呈现表单的操作，按钮将获得以下名称的 .class = "btn btn-default" （Bootstrap 类）（或您指定的任何 .class）：

- Update model_name - Create model_name （其中 model_name 是脚手架模型的名称）

- aloucas

---

尽管得票数比被选答案少，但这是大多数人想要使用的解决方案。 - IAmNaN

这就是我一直在寻找的东西。 - Sandeep Garg

有用的，并允许添加HTML属性（如示例中的“id”或“class”）而不更改默认的Rails生成的按钮文本。 - TK-421

在我看来，这是最好的答案，因为它保留了根据控制器操作动态分配文本到按钮（“创建”或“更新”）的行为。 - sixty4bit

绝对如@sixty4bit所说。 应该在翻译文件中设置按钮文本，以便表单可以在不同的控制器动作之间重用，例如“创建评论”与“更新评论”。请参见此答案-https://dev59.com/XnPYa4cB1Zd3GeqPeQpy#18255633 - Jarvis Johnson

看起来很奇怪，为什么不需要使用逗号呢？ - stevec

Answer 3

Rails 4和Bootstrap 3的"primary"按钮

<%= f.submit nil, :class => 'btn btn-primary' %>

大致呈现如下：

- cwd

---

这样做实际上是最好的，因为为名称指定 nil 会保留助手的默认行为，即如果它找到正在创建/显示对象的实例变量，例如 @person，它将相应地命名按钮（更新 Foo 或创建 Foo），并且 form_for 表单构建器会选择正确的操作。因此，您可以将表单代码提取到一个部分中，并将其用于显示模型对象（如果您希望使用表单来显示它），更新它并创建新实例。 - Paul-Sebastian Manole

Answer 4

正如Srdjan Pejic所说，你可以使用

<%= f.submit 'name', :class => 'button' %>

或者新的语法：

<%= f.submit 'name', class: 'button' %>

- RailsZilla.com

Answer 5

添加类键值对

<%= f.submit "Submit", class: 'btn btn-primary' %>

- BenKoshy

---

这适用于 Rails 6，但表单字段的语法已经改变了，而且这有点让人发疯。 - Krishnadas PC

@KrishnadasPC，你说得对，我更新了我的答案，现在应该更加规范了。 - BenKoshy

Answer 6

默认情况下，Rails 4 使用'value'属性来控制可见按钮文本，因此为了保持标记的清洁，我建议使用：

<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>

- benjamin.patch

Answer 7

两者都可以使用 <%= f.submit class: "btn btn-primary" %> 和 <%= f.submit "按钮名称", class: "btn btn-primary "%>

- gsumk