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.
81 lines
2.4 KiB
Markdown
81 lines
2.4 KiB
Markdown
---
|
||
title: Button 按钮
|
||
description: 按钮组件用于触发操作或提交表单
|
||
sidebar: auto
|
||
---
|
||
|
||
# Button 按钮
|
||
|
||
## 概述
|
||
|
||
按钮是最常用的交互元素之一，用于触发操作、提交表单或导航到其他页面。
|
||
|
||
## 语法演示
|
||
|
||
:::demo button-variants
|
||
展示所有视觉变体的按钮组件
|
||
:::
|
||
|
||
## 属性
|
||
|
||
<PropsTable :props="[
|
||
{ name: 'variant', type: '\'default\' | \'destructive\' | \'outline\' | \'secondary\' | \'ghost\' | \'link\' | \'gradient\' | \'gradientPrimary\'', required: false, default: '\'default\'', description: '按钮的视觉变体' },
|
||
{ name: 'size', type: '\'default\' | \'sm\' | \'lg\' | \'icon\'', required: false, default: '\'default\'', description: '按钮的大小' },
|
||
{ name: 'asChild', type: 'boolean', required: false, default: 'false', description: '是否将 props 与子元素合并（用于 Radix UI 组合）' },
|
||
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: '是否禁用按钮' },
|
||
{ name: 'onClick', type: '() => void', required: false, default: '-', description: '点击事件回调函数' },
|
||
{ name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' },
|
||
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: '按钮内容' }
|
||
]" />
|
||
|
||
## 变体说明
|
||
|
||
### Default（默认）
|
||
|
||
默认按钮用于主要的操作场景。
|
||
|
||
### Destructive（破坏性）
|
||
|
||
破坏性按钮用于删除、移除等不可逆的操作。
|
||
|
||
### Outline（轮廓）
|
||
|
||
轮廓按钮用于次要操作，视觉上更轻量。
|
||
|
||
### Secondary（次要）
|
||
|
||
次要按钮用于辅助操作。
|
||
|
||
### Ghost（幽灵）
|
||
|
||
幽灵按钮没有边框，视觉上最轻量。
|
||
|
||
### Link（链接）
|
||
|
||
链接按钮看起来像链接，但具有按钮的交互行为。
|
||
|
||
### Gradient（渐变）
|
||
|
||
渐变按钮使用品牌渐变色，悬停时带有发光效果。
|
||
|
||
### Gradient Primary（主色渐变）
|
||
|
||
主色渐变按钮使用主题主色渐变，悬停时带有增强的发光效果。
|
||
|
||
## 使用场景
|
||
|
||
| 场景 | 推荐变体 |
|
||
|------|----------|
|
||
| 主要操作（提交、保存） | default, gradientPrimary |
|
||
| 危险操作（删除、移除） | destructive |
|
||
| 次要操作 | outline, secondary |
|
||
| 取消操作 | ghost, outline |
|
||
| 导航链接 | link |
|
||
| 促销/特色 CTA | gradient |
|
||
|
||
## 相关组件
|
||
|
||
- [Input 输入框](/zh-CN/components/ui/input)
|
||
- [Select 选择器](/zh-CN/components/ui/select)
|
||
- [Dialog 对话框](/zh-CN/components/ui/dialog)
|