mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-03 15:43:11 +08:00
- 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.
2.7 KiB
2.7 KiB
title, description, sidebar
| title | description | sidebar |
|---|---|---|
| Badge 徽章 | 用于视觉分类的小型状态或标签组件 | auto |
Badge 徽章
概述
Badge 徽章组件用于以紧凑形式显示状态、类别或标签。它通常用于标签、状态指示器和计数。
语法演示
:::demo badge-variants 展示所有可用的徽章变体,包括默认、次要、破坏性、轮廓、成功、警告、信息、审查和渐变样式 :::
属性
变体说明
Default(默认)
主题色背景的主要徽章。用于主要标签和类别。
Secondary(次要)
次要信息的灰色徽章。
Destructive(破坏性)
红色徽章,用于错误、危险状态或负面状态指示。
Outline(轮廓)
只有文本和边框、无背景的徽章。用于微妙的标签。
Success(成功)
绿色徽章,用于成功状态、完成的操作或正面状态指示。
Warning(警告)
黄色/琥珀色徽章,用于警告、待处理状态或注意事项。
Info(信息)
蓝色徽章,用于信息内容或中性状态。
Review(审查)
紫色徽章,用于审查状态、待审查或反馈指示器。
Gradient(渐变)
带品牌渐变背景的徽章,用于特色或突出显示的项目。
使用示例
基础徽章
<Badge>默认</Badge>
状态指示器
<Badge variant="success">活跃</Badge>
<Badge variant="warning">待处理</Badge>
<Badge variant="destructive">失败</Badge>
<Badge variant="info">草稿</Badge>
计数徽章
<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>
分类标签
<div class="flex gap-2">
<Badge variant="outline">React</Badge>
<Badge variant="outline">TypeScript</Badge>
<Badge variant="outline">Tailwind</Badge>
</div>
审查状态
<Badge variant="review">审查中</Badge>
渐变徽章
<Badge variant="gradient">特色</Badge>