mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
2fb93d20e0
- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure. - Added terminal dashboard documentation, highlighting its layout, core features, and usage examples. - Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.
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)
|