如何自定义使用 simple_form gem 创建的设计登录和注册表单?
How to customize devise login and signup forms created using the simple_form gem?
我在我的 rails 应用程序中使用设计进行身份验证,并且我使用 simple_form gem 创建了表单。我想使用 css 自定义登录和注册表单,但似乎无法确定要使用哪个 class 并添加换行符。
这是我需要做的,
- 在标签后添加换行符并将星号移至标签后。
- 使用 css
自定义输入框
- 使用 css
自定义注册按钮
这是我设计的注册页面视图的样子,
<div class="formwrapper">
<center>
<h1>Sign up</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>
<br>
<%= f.input :last_name, :label => 'Last Name', required: true, autofocus: true %>
<br>
<%= f.input :user_name, :label => 'Username', required: true, autofocus: true %>
<br>
<%= f.input :email, :label => 'Email', required: true, autofocus: true %>
<br>
<%= f.input :password, :label => 'Password', required: true %>
<br>
<%= f.input :password_confirmation, :label => 'Confirm Password', required: true %>
<br>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</center>
</div>
由于 Devise 是一个引擎,它的所有视图都打包在 gem 中。这些视图将帮助您开始,但一段时间后您可能想要更改它们。如果是这种情况,您只需调用以下生成器,它会将所有视图复制到您的应用程序:
rails generate devise:views
如果您的应用程序中有多个 Devise 模型(例如 User 和 Admin),您会注意到 Devise 对所有模型使用相同的视图。幸运的是,Devise 提供了一种自定义视图的简单方法。您需要做的就是设置:
config.scoped_views = true
在 config/initializers/devise.rb 文件中。
好的。这很简单。
在您的代码中将其更改为
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>
这个 :-
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true , **:class => 'yourcustomclass'** %>
其他控件也一样。
我在我的 rails 应用程序中使用设计进行身份验证,并且我使用 simple_form gem 创建了表单。我想使用 css 自定义登录和注册表单,但似乎无法确定要使用哪个 class 并添加换行符。
这是我需要做的,
- 在标签后添加换行符并将星号移至标签后。
- 使用 css 自定义输入框
- 使用 css 自定义注册按钮
这是我设计的注册页面视图的样子,
<div class="formwrapper">
<center>
<h1>Sign up</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>
<br>
<%= f.input :last_name, :label => 'Last Name', required: true, autofocus: true %>
<br>
<%= f.input :user_name, :label => 'Username', required: true, autofocus: true %>
<br>
<%= f.input :email, :label => 'Email', required: true, autofocus: true %>
<br>
<%= f.input :password, :label => 'Password', required: true %>
<br>
<%= f.input :password_confirmation, :label => 'Confirm Password', required: true %>
<br>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</center>
</div>
由于 Devise 是一个引擎,它的所有视图都打包在 gem 中。这些视图将帮助您开始,但一段时间后您可能想要更改它们。如果是这种情况,您只需调用以下生成器,它会将所有视图复制到您的应用程序:
rails generate devise:views
如果您的应用程序中有多个 Devise 模型(例如 User 和 Admin),您会注意到 Devise 对所有模型使用相同的视图。幸运的是,Devise 提供了一种自定义视图的简单方法。您需要做的就是设置:
config.scoped_views = true
在 config/initializers/devise.rb 文件中。
好的。这很简单。
在您的代码中将其更改为
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>
这个 :-
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true , **:class => 'yourcustomclass'** %>
其他控件也一样。