Button 按钮
按钮用于触发一个操作。提供主要、次要、静默三种变体,与三种尺寸。
基础用法
vue
<AButton variant="primary">Primary</AButton>
<AButton variant="secondary">Secondary</AButton>
<AButton variant="ghost">Ghost</AButton>尺寸
vue
<AButton size="sm">Small</AButton>
<AButton size="md">Medium</AButton>
<AButton size="lg">Large</AButton>禁用与加载
vue
<AButton disabled>Disabled</AButton>
<AButton loading>Loading</AButton>API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'secondary' | 视觉变体 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
disabled | boolean | false | 是否禁用 |
loading | boolean | false | 加载态,显示 spinner |
type | 'button' | 'submit' | 'reset' | 'button' | 原生 type |
Emits
| 名称 | 参数 | 说明 |
|---|---|---|
click | MouseEvent | 点击时触发 |
Slots
| 名称 | 说明 |
|---|---|
| default | 按钮文本与图标 |
交互特性
- hover 时上浮
1px并加深阴影 - active 时
scale(0.96)spring 回弹 - 颜色过渡使用
--ease-smooth,缩放使用--ease-spring