如何添加 class 以形成具有 simple_form 的组件

Question

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

Answer 1

It is also possible to pass any html attribute straight to the input, by using the :input_html option, for instance:

<%= 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 %>

If you want to pass the same options to all inputs in the form (for example, a default class), you can use the :defaults option in simple_form_for. Specific options in input call will overwrite the 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

在上面的基础上加一点。

出于样式或动态脚本（例如 javascript）的目的，您还可以通过提供 id 选项提供一个 ID，以将元素与同一 class 的其他元素区分开来，像这样：

<%= 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 %>

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

从CSS开始，你可以参考这些样式，像这样：

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

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

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

var submit_button = document.getElementById("submit-button");

submit_button.addEventListener("click", function () {
    alert('Yeeehaaah!');
    submit_button.submit();
});

对于细粒度控制，您需要使用 id 属性而不是 class 属性；但是，对于元素的类似主题的控制，class 属性更有用。

如何添加 class 以形成具有 simple_form 的组件

How to add class to form components with simple_form

ruby

ruby-on-rails

simple-form