mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-03 15:43:11 +08:00
99d6438303
- Introduced Checkbox component documentation in Chinese, covering usage, properties, and examples. - Added Input component documentation in Chinese, detailing its attributes and various states. - Created Select component documentation in Chinese, including subcomponents and usage examples. - Developed Queue management documentation, outlining its core functionalities and component structure. - Added Terminal dashboard documentation, describing its layout, core features, and usage examples. - Documented team workflows, detailing various team skills and their applications in project management.
120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
---
|
||
title: Badge 徽章
|
||
description: 用于视觉分类的小型状态或标签组件
|
||
sidebar: auto
|
||
---
|
||
|
||
# Badge 徽章
|
||
|
||
## 概述
|
||
|
||
Badge 徽章组件用于以紧凑形式显示状态、类别或标签。它通常用于标签、状态指示器和计数。
|
||
|
||
## 语法演示
|
||
|
||
:::demo badge-variants
|
||
展示所有可用的徽章变体，包括默认、次要、破坏性、轮廓、成功、警告、信息、审查和渐变样式
|
||
:::
|
||
|
||
## 属性
|
||
|
||
<PropsTable :props="[
|
||
{ name: 'variant', type: '\'default\' | \'secondary\' | \'destructive\' | \'outline\' | \'success\' | \'warning\' | \'info\' | \'review\' | \'gradient\'', required: false, default: '\'default\'', description: '视觉样式变体' },
|
||
{ name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' },
|
||
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: '徽章内容' }
|
||
]" />
|
||
|
||
## 变体说明
|
||
|
||
### Default（默认）
|
||
|
||
主题色背景的主要徽章。用于主要标签和类别。
|
||
|
||
### Secondary（次要）
|
||
|
||
次要信息的灰色徽章。
|
||
|
||
### Destructive（破坏性）
|
||
|
||
红色徽章，用于错误、危险状态或负面状态指示。
|
||
|
||
### Outline（轮廓）
|
||
|
||
只有文本和边框、无背景的徽章。用于微妙的标签。
|
||
|
||
### Success（成功）
|
||
|
||
绿色徽章，用于成功状态、完成的操作或正面状态指示。
|
||
|
||
### Warning（警告）
|
||
|
||
黄色/琥珀色徽章，用于警告、待处理状态或注意事项。
|
||
|
||
### Info（信息）
|
||
|
||
蓝色徽章，用于信息内容或中性状态。
|
||
|
||
### Review（审查）
|
||
|
||
紫色徽章，用于审查状态、待审查或反馈指示器。
|
||
|
||
### Gradient（渐变）
|
||
|
||
带品牌渐变背景的徽章，用于特色或突出显示的项目。
|
||
|
||
## 使用示例
|
||
|
||
### 基础徽章
|
||
|
||
```vue
|
||
<Badge>默认</Badge>
|
||
```
|
||
|
||
### 状态指示器
|
||
|
||
```vue
|
||
<Badge variant="success">活跃</Badge>
|
||
<Badge variant="warning">待处理</Badge>
|
||
<Badge variant="destructive">失败</Badge>
|
||
<Badge variant="info">草稿</Badge>
|
||
```
|
||
|
||
### 计数徽章
|
||
|
||
```vue
|
||
<div class="relative">
|
||
<Bell />
|
||
<Badge variant="destructive" class="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
|
||
3
|
||
</Badge>
|
||
</div>
|
||
```
|
||
|
||
### 分类标签
|
||
|
||
```vue
|
||
<div class="flex gap-2">
|
||
<Badge variant="outline">React</Badge>
|
||
<Badge variant="outline">TypeScript</Badge>
|
||
<Badge variant="outline">Tailwind</Badge>
|
||
</div>
|
||
```
|
||
|
||
### 审查状态
|
||
|
||
```vue
|
||
<Badge variant="review">审查中</Badge>
|
||
```
|
||
|
||
### 渐变徽章
|
||
|
||
```vue
|
||
<Badge variant="gradient">特色</Badge>
|
||
```
|
||
|
||
## 相关组件
|
||
|
||
- [Card 卡片](/zh-CN/components/ui/card)
|
||
- [Button 按钮](/zh-CN/components/ui/button)
|
||
- [Avatar 头像](/zh-CN/components/ui/avatar)
|