176 lines
3.3 KiB
Markdown
176 lines
3.3 KiB
Markdown
|
# HeroUI 使用指南
|
|||
|
|
|
|||
|
|
## 已完成的配置
|
|||
|
|
|
|||
|
|
✅ 安装了 HeroUI 核心包：
|
|||
|
|
- `@heroui/react` - React 组件库
|
|||
|
|
- `@heroui/theme` - 主题系统
|
|||
|
|
- `framer-motion` - 动画库
|
|||
|
|
|
|||
|
|
✅ 升级到 Tailwind CSS 4
|
|||
|
|
|
|||
|
|
✅ 更新配置文件：
|
|||
|
|
- `tailwind.config.ts` - 添加了 HeroUI 插件和内容路径
|
|||
|
|
- `postcss.config.mjs` - 更新为使用 `@tailwindcss/postcss`
|
|||
|
|
- `components/Providers.tsx` - 添加了 `HeroUIProvider`
|
|||
|
|
|
|||
|
|
## 如何使用 HeroUI 组件
|
|||
|
|
|
|||
|
|
### 1. 导入组件
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import { Button, Card, CardBody, Input, Navbar, NavbarBrand } from '@heroui/react';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 常用组件示例
|
|||
|
|
|
|||
|
|
#### Button（按钮）
|
|||
|
|
```tsx
|
|||
|
|
<Button color="primary">点击我</Button>
|
|||
|
|
<Button color="secondary" variant="bordered">边框按钮</Button>
|
|||
|
|
<Button isLoading>加载中...</Button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Card（卡片）
|
|||
|
|
```tsx
|
|||
|
|
<Card>
|
|||
|
|
<CardBody>
|
|||
|
|
<p>这是卡片内容</p>
|
|||
|
|
</CardBody>
|
|||
|
|
</Card>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Input（输入框）
|
|||
|
|
```tsx
|
|||
|
|
<Input
|
|||
|
|
type="email"
|
|||
|
|
label="Email"
|
|||
|
|
placeholder="输入你的邮箱"
|
|||
|
|
/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### Navbar（导航栏）
|
|||
|
|
```tsx
|
|||
|
|
<Navbar>
|
|||
|
|
<NavbarBrand>
|
|||
|
|
<p className="font-bold text-inherit">ACME</p>
|
|||
|
|
</NavbarBrand>
|
|||
|
|
</Navbar>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 主题定制
|
|||
|
|
|
|||
|
|
在 `tailwind.config.ts` 中自定义主题：
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
import { heroui } from "@heroui/theme";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
plugins: [
|
|||
|
|
heroui({
|
|||
|
|
themes: {
|
|||
|
|
light: {
|
|||
|
|
colors: {
|
|||
|
|
primary: {
|
|||
|
|
DEFAULT: "#0070f3",
|
|||
|
|
foreground: "#ffffff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
dark: {
|
|||
|
|
colors: {
|
|||
|
|
primary: {
|
|||
|
|
DEFAULT: "#0070f3",
|
|||
|
|
foreground: "#ffffff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 使用暗色模式
|
|||
|
|
|
|||
|
|
HeroUI 自动支持暗色模式，已配置 `darkMode: "class"`：
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// 在你的 ThemeContext 中已经实现
|
|||
|
|
const { theme, toggleTheme } = useTheme();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
HTML 元素会自动添加/移除 `dark` class。
|
|||
|
|
|
|||
|
|
## 可用的组件
|
|||
|
|
|
|||
|
|
HeroUI 提供了丰富的组件：
|
|||
|
|
|
|||
|
|
### 布局组件
|
|||
|
|
- `Navbar` - 导航栏
|
|||
|
|
- `Card` - 卡片
|
|||
|
|
- `Divider` - 分隔线
|
|||
|
|
- `Spacer` - 间距
|
|||
|
|
|
|||
|
|
### 表单组件
|
|||
|
|
- `Button` - 按钮
|
|||
|
|
- `Input` - 输入框
|
|||
|
|
- `Textarea` - 多行文本框
|
|||
|
|
- `Select` - 下拉选择
|
|||
|
|
- `Checkbox` - 复选框
|
|||
|
|
- `Radio` - 单选框
|
|||
|
|
- `Switch` - 开关
|
|||
|
|
|
|||
|
|
### 数据展示
|
|||
|
|
- `Table` - 表格
|
|||
|
|
- `Avatar` - 头像
|
|||
|
|
- `Badge` - 徽章
|
|||
|
|
- `Chip` - 标签
|
|||
|
|
- `Progress` - 进度条
|
|||
|
|
|
|||
|
|
### 反馈组件
|
|||
|
|
- `Modal` - 模态框
|
|||
|
|
- `Tooltip` - 提示框
|
|||
|
|
- `Popover` - 弹出框
|
|||
|
|
- `Dropdown` - 下拉菜单
|
|||
|
|
|
|||
|
|
### 导航组件
|
|||
|
|
- `Tabs` - 标签页
|
|||
|
|
- `Breadcrumbs` - 面包屑
|
|||
|
|
- `Pagination` - 分页
|
|||
|
|
- `Link` - 链接
|
|||
|
|
|
|||
|
|
## 示例：重构现有组件
|
|||
|
|
|
|||
|
|
### 重构前（原生 HTML）
|
|||
|
|
```tsx
|
|||
|
|
<button className="bg-[#111827] rounded-lg px-5 py-2.5 hover:opacity-90">
|
|||
|
|
<span className="text-white font-bold">Launch App</span>
|
|||
|
|
</button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 重构后（HeroUI）
|
|||
|
|
```tsx
|
|||
|
|
<Button
|
|||
|
|
color="default"
|
|||
|
|
variant="solid"
|
|||
|
|
className="font-bold"
|
|||
|
|
>
|
|||
|
|
Launch App
|
|||
|
|
</Button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 文档链接
|
|||
|
|
|
|||
|
|
- [HeroUI 官网](https://heroui.com)
|
|||
|
|
- [组件文档](https://heroui.com/docs/components/button)
|
|||
|
|
- [主题定制](https://heroui.com/docs/customization/theme)
|
|||
|
|
- [暗色模式](https://heroui.com/docs/customization/dark-mode)
|
|||
|
|
|
|||
|
|
## 下一步
|
|||
|
|
|
|||
|
|
1. 逐步将现有组件重构为使用 HeroUI
|
|||
|
|
2. 利用 HeroUI 的主题系统统一样式
|
|||
|
|
3. 使用 HeroUI 的内置暗色模式支持
|
|||
|
|
4. 享受更好的可访问性和响应式设计
|