按钮提交 Rails 字体真棒 - Ruby

如果你正在开发一个 Ruby on Rails 应用程序，并且需要添加一个漂亮的按钮，那么你来对地方了。在这个教程中，我们将学习如何添加一个漂亮的按钮以及提交表单数据。

步骤 1：安装 Font Awesome

首先，我们需要安装 Font Awesome。Font Awesome 是一个很受欢迎的字体库，其中包含了各种图标，包括各种按钮。你可以通过以下命令来安装 Font Awesome：

gem 'font-awesome-rails'

现在，运行 bundle install 命令以安装 font-awesome-rails gem。

步骤 2：构建提交按钮

在我们的表单中添加一个提交按钮：

<%= form_with model: @user, local: true do |form| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
        <% @user.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <%= form.label :name %>
    <%= form.text_field :name, class: 'form-control', placeholder: 'Enter name' %>
  </div>

  <div class="form-group">
    <%= form.label :email %>
    <%= form.email_field :email, class: 'form-control', placeholder: 'Enter email' %>
  </div>

  <div class="form-group">
    <%= form.label :password %>
    <%= form.password_field :password, class: 'form-control', placeholder: 'Enter password' %>
  </div>

  <div class="form-group">
    <%= form.label :password_confirmation %>
    <%= form.password_field :password_confirmation, class: 'form-control', placeholder: 'Confirm password' %>
  </div>

  <div class="form-actions">
    <%= form.submit 'Submit', class: 'btn btn-primary btn-block' %>
  </div>
<% end %>

这将创建一个提交按钮，并将其样式设置为 btn btn-primary btn-block。btn btn-primary 允许我们使用 Bootstrap 的基本样式，btn-block 会将按钮扩展为占据整个可用空间。

步骤 3：添加 Font Awesome 图标

现在我们已经创建了一个漂亮的按钮，但是它仍然比 Font Awesome 不够好看。让我们通过添加一个 Font Awesome 图标来改进它：

<%= form.submit '<i class="fa fa-paper-plane"></i> Submit'.html_safe, class: 'btn btn-primary btn-block' %>

现在，将使用 Font Awesome 的 fa-paper-plane 图标替换 "Submit" 的文本，然后将其标记为 HTML 安全字符串，以确保它不会被转义。这将使我们的按钮看起来更好。

步骤 4：样式表

最后，我们需要添加样式表以确保我们的按钮在不同大小的设备上都可以正确显示。可以通过以下样式表来实现：

.btn-primary {
  background-color: #337ab7;
  border-color: #2e6da4;
  color: #fff;

  &:focus,
  &:hover {
    background-color: #286090;
    border-color: #204d74;
    color: #fff;
  }
}

.btn-block {
  display: block;
  width: 100%;
}

.fa {
  font-family: 'FontAwesome';
}

.btn .fa {
  margin-right: 5px;
}

@media (min-width: 768px) {
  .btn-group-vertical {
    .btn {
      width: 100%;
    }
  }
}

@media (max-width: 768px) {
  .btn-group-vertical {
    .btn {
      width: 100%;
    }
  }
}

这将应用 Bootstrap 的基本样式和 Font Awesome 的图标，以及一些自定义样式，以便按钮能够正确地在手机和桌面设备上显示。

结论

通过这篇文章，你已经学会了如何添加一个漂亮的按钮以及提交表单数据。这将为你的 Ruby on Rails 应用程序带来一些很好的外观和交互体验。