ActiveAdmin 主题: status_tag

简介

status_tag 是 ActiveAdmin 内置的一个视图组件，它可以为不同的状态提供不同的标签。这个主题为 status_tag 添加了 Bootstrap 样式，让你可以轻松地美化你的 ActiveAdmin 界面。

安装

将以下代码添加到你的 Gemfile 中：

gem 'activeadmin-status_tag-theme', '~> 1.0'

然后在终端中运行：

bundle install

最后，在 active_admin.css.scss 文件中添加以下内容：

@import "activeadmin-status_tag-theme";

使用

在 ActiveAdmin 中，你可以用 status_tag 来显示一个记录的状态，如下所示：

index do
  column :title
  column :status do |post|
    case post.status
    when "published"
      status_tag "已发布", :ok
    when "draft"
      status_tag "草稿", :warning
    when "deleted"
      status_tag "已删除", :error
    end
  end
  actions
end

这里，我们在 status_tag 中使用了 Bootstrap 的图标，如 :ok、:warning、:error 等。

样式定制

如果你想自定义样式，你可以在你的 active_admin.css.scss 文件中定义以下变量：

$status-tag-default-color: #fff !default;
$status-tag-default-background-color: #999 !default;
$status-tag-default-border-color: #999 !default;
$status-tag-success-color: #fff !default;
$status-tag-success-background-color: #28a745 !default;
$status-tag-success-border-color: #28a745 !default;
$status-tag-warning-color: #fff !default;
$status-tag-warning-background-color: #ffc107 !default;
$status-tag-warning-border-color: #ffc107 !default;
$status-tag-error-color: #fff !default;
$status-tag-error-background-color: #dc3545 !default;
$status-tag-error-border-color: #dc3545 !default;

例如，若要为 status_tag 添加两倍边框：

$status-tag-default-border-width: 2px !default;

源代码片段：

```ruby
index do
  column :title
  column :status do |post|
    case post.status
    when "published"
      status_tag "已发布", :ok
    when "draft"
      status_tag "草稿", :warning
    when "deleted"
      status_tag "已删除", :error
    end
  end
  actions
end
```

```scss
@import "activeadmin-status_tag-theme";

$status-tag-default-border-width: 2px !default;
```