Fz DesignButton 按钮
基本按钮，提供一些美化的样式。
基础用法
type 属性可以配置不同的主题类型，展示不同的颜色状态
加载状态
loading 属性可以控制加载状态。
自定义 Icon
icon 属性接受 @fz-design/fz-design-icon 提供的图标。
尺寸
使用 size 属性设置按钮的尺寸大小。
按钮组
Button API
API
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型 | ButtonType | - |
| size | 尺寸 | ButtonSize | - |
| text | 文本按钮 | boolean | false |
| native-type | 原生类型 | ButtonNative | button |
| disabled | 是否禁用 | boolean | false |
| icon | 图标 | IconSlotType | - |
| loading | 是否加载中 | boolean | false |
| plain | 是否简单风格 | boolean | false |
| round | 是否圆角风格 | boolean | false |
| circle | 是否圆形风格 | boolean | false |
| autofocus | 自动对焦 | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
default | 默认内容 |
icon | 图标 slot |
Events
| 事件名 | 说明 | 参数列表 | 参数说明 |
|---|---|---|---|
click | 点击事件 | $event | 原生的 dom event |
Interface
组件导出以下类型定义：
ts
import type { ButtonInstance, ButtonProps, ButtonType, ButtonSize } from 'fz-design'import type { ButtonInstance, ButtonProps, ButtonType, ButtonSize } from 'fz-design'样式变量
组件提供了下列 CSS 变量，可用于自定义样式
| 名称 | 描述 |
|---|---|
--fz-button-bg-color | 按钮背景色 |
--fz-button-text-color | 按钮文字颜色 |
... | ... |
ButtonGroup API
API
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型 | string | - |
| size | 尺寸 | string | - |
Slots
| 名称 | 说明 |
|---|---|
default | Button元素 |