Rails UI 使用教程

Rails UI 使用教程

1. 项目介绍

Rails UI 是一个为 Ruby on Rails 应用程序提供专业设计的主题和组件的开源项目。它通过集成 Tailwind CSS，提供了一系列的 UI 组件和页面模板，帮助开发者快速搭建具有一致风格和高效用户体验的应用程序。

2. 项目快速启动

首先，确保您的系统中已经安装了 Node.js、Yarn 和 Rails。以下是在新的 Rails 应用中快速启动 Rails UI 的步骤：

# 创建新的 Rails 应用，并指定使用 Tailwind CSS 和 esbuild
rails new myapp -c tailwind -j esbuild

# 切换到新创建的应用目录
cd myapp

# 添加 railsui gem 到 Gemfile
echo "gem 'railsui'" >> Gemfile

# 安装 Gemfile 中列出的所有 gem
bundle install

# 安装 Rails UI 和 Tailwind CSS
rails railsui:install

# 运行开发服务器
bin/dev

# 打开浏览器访问 http://localhost:3000/railsui 开始配置

3. 应用案例和最佳实践

• 主题定制：Rails UI 默认提供 Hound 主题，但你可以通过更改配置来使用其他主题。在 app/assets/stylesheets/railsui/theme.css 中可以自定义主题颜色。
• 组件使用：Rails UI 提供了多种 UI 组件，如导航栏、表格、表单等。这些组件都是基于 Stimulus.js 构建的，可以直接在你的视图中使用。
• 页面布局：项目中的页面布局是可定制的，你可以根据自己的需求修改 app/views/rui 目录下的页面。

4. 典型生态项目

Rails UI 的生态中，有一些典型的项目可以帮助开发者更高效地构建应用程序：

• Rails UI Icons：提供了一组基于 Heroicons 的图标，可以直接在项目中使用。
• JsBundling-Rails：用于 JavaScript 的打包工具，与 Rails UI 配合使用，可以提供更好的 JavaScript 文件管理。
• CSSBundling-Rails：用于 CSS 文件的打包和集成 Tailwind CSS。

以上是 Rails UI 的基本使用教程，通过遵循这些步骤，您可以快速搭建并运行一个具有专业 UI 的 Rails 应用程序。