Question

有没有人知道如何在rails简单表单上添加类到ruby，以及如何将类添加到单个组件中，以便稍后我可以在CSS中设置它们的样式。谢谢

Answer 1

也可以使用：input_html选项将任何html属性直接传递给输入，例如：

<%= simple_form_for @user do |f| %>
  <%= f.input :username, input_html: { class: 'special' } %>
  <%= f.input :password, input_html: { maxlength: 20 } %>
  <%= f.input :remember_me, input_html: { value: '1' } %>
  <%= f.button :submit %>
<% end %>

如果要将相同的选项传递给表单中的所有输入（例如，默认类），可以使用simple_form_for中的：defaults选项。输入调用中的特定选项将覆盖默认值：

<%= simple_form_for @user, defaults: { input_html: { class: 'default_class' } } do |f| %>
  <%= f.input :username, input_html: { class: 'special' } %>
  <%= f.input :password, input_html: { maxlength: 20 } %>
  <%= f.input :remember_me, input_html: { value: '1' } %>
  <%= f.button :submit %>
<% end %>

Answer 2

只需在@bmac151's answer上方添加一个点。

对于样式或动态脚本（例如javascript）目的，您还可以提供ID以通过提供.state('/datatrial', { url: "/datatrial/:id", templateUrl: 'simple/TestPanelTrial.html', controller: function ($stateParams) { if ($state.params.id !== 'Suggest') { $state.go('/error'); } } });选项来区分元素与同一类的其他元素，如下所示：

id

这将为表单中的所有元素以及表单本身提供唯一的ID。

从CSS中，您可以参考这些样式，如下所示：

<%= simple_form_for @user, html: { id: 'simple-form' } do |f| %>
  <%= f.input :username, input_html: { class: 'special', id: 'username' } %>
  <%= f.input :password, input_html: { maxlength: 20, id: 'password' } %>
  <%= f.input :remember_me, input_html: { value: '1', id: 'remember_me' } %>
  <%= f.button :submit, id: 'submit-button' %>
<% end %>

从Javascript，您也可以通过元素ID来引用元素。有了这个，您可以将动态行为应用于单个元素，而不是一次应用于整个类。这是一个Javascript示例：

#simple-form {
    font-size: 125%;
}

#submit-button {
    text-transform: uppercase;
}

对于细粒度控制，您需要使用var submit_button = document.getElementById("submit-button"); submit_button.addEventListener("click", function () { alert('Yeeehaaah!'); submit_button.submit(); });属性而不是id属性;但是，对于元素的类似主题的控制，class属性更有用。

如何使用simple_form添加类以形成组件

2 个答案: