Active Admin Theme 使用教程

Active Admin Theme 使用教程

active_admin_theme:+1: flat skin for activeadmin项目地址:https://gitcode.com/gh_mirrors/ac/active_admin_theme

1. 项目介绍

Active Admin Theme 是一个为 Active Admin 设计的扁平化主题，旨在提供一个现代、简洁的用户界面。该项目通过 NPM 模块或 Ruby Gem 的方式集成到你的 Active Admin 应用中，支持通过 Webpacker 或其他资产打包工具进行管理。

2. 项目快速启动

2.1 安装

通过 NPM 安装

npm install @activeadmin-plugins/active_admin_theme

或者使用 Yarn：

yarn add @activeadmin-plugins/active_admin_theme

通过 Gem 安装

在 Gemfile 中添加：

gem 'active_admin_theme', '~> 1.1.4'

然后运行：

bundle install

2.2 使用

在你的 Active Admin 样式表入口文件（如 active_admin.scss）中添加以下代码：

// 通过 Sprockets 使用
@import 'wigu/active_admin_theme';

// 或者通过 Webpacker 使用
@import '@activeadmin-plugins/active_admin_theme';

2.3 自定义主题颜色

你可以在导入主题之前设置一些变量来自定义主题颜色：

$skinMainFirstColor: #A5A7AA; // 默认值
$skinMainSecondColor: #0066CC; // 默认值
$skinBorderWindowColor: #B8BABE; // 默认值

@import 'wigu/active_admin_theme';

3. 应用案例和最佳实践

3.1 应用案例

Active Admin Theme 可以用于任何使用 Active Admin 的 Rails 项目，提供一个现代化的管理界面。例如，一个电子商务平台可以使用该主题来提升后台管理界面的用户体验。

3.2 最佳实践

• 自定义颜色：根据你的品牌颜色调整主题颜色，以保持一致性。
• 模块化管理：使用 Webpacker 或 Sprockets 管理资产，确保主题的更新和维护更加方便。

4. 典型生态项目

• Active Admin：Active Admin Theme 是基于 Active Admin 的扩展，提供了更丰富的界面设计。
• Webpacker：用于管理 Rails 应用中的 JavaScript 和 CSS 资产，支持现代前端开发工具链。
• Sprockets：Rails 的默认资产管道，用于管理和编译静态资源。

通过以上步骤，你可以快速集成和使用 Active Admin Theme，提升你的 Active Admin 应用的用户体验。

active_admin_theme:+1: flat skin for activeadmin项目地址:https://gitcode.com/gh_mirrors/ac/active_admin_theme