Fighting DesignToolbar 工具栏
工具栏就用它
基本使用
工具栏的基本使用，icon 可以配置带有图表的选项
开启
不同大小
size 属性可以配置不同的大小
开启
圆角
round 属性为圆角
开启
背景色
background 可以自定义背景色
text-color 可以自定义文字颜色
开启
点击事件
f-toolbar 采用事件委托，可以给 f-toolbar 添加事件，并给每个 f-toolbar-item 添加唯一的 index，那么在 click 的回调中就可以解构出 key 用于区分
也可以给每个 f-toolbar-item 单独添加点击事件
开启
Toolbar Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
size | 尺寸 | FightingSize | large middle small mini | large |
round | 显示为圆角 | boolean | —— | false |
background | 背景颜色 | string | —— | —— |
text-color | 字体颜色 | string | —— | —— |
fixed | 是否固定定位 | boolean | —— | false |
width | 自定义宽度 | string / number | —— | —— |
height | 自定义高度 | string / number | —— | —— |
on-click | 点击之后触发的回调 | ToolbarClick | —— | —— |
Toolbar Slots
| 名称 | 说明 |
|---|---|
default | 子工具栏选项 |
Toolbar-Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
index | 唯一值 | string / number | —— | —— |
color | 自定义文字颜色 | string | —— | —— |
icon | 自定义 icon | FightingIcon | —— | —— |
icon-size | 自定义 icon 大小 | string / number | —— | 16 |
on-click | 点击之后触发的回调 | HandleMouse | —— | —— |
Toolbar-Item Slots
| 名称 | 说明 |
|---|---|
default | 默认内容 |
Interface
组件导出以下类型定义：
ts
import type {
ToolbarInstance,
ToolbarProps,
ToolbarClick
ToolbarItemInstance,
ToolbarItemProps,
} from 'fighting-design'ToolbarClick
ts
type ToolbarClick = (index: string | null, evt: MouseEvent) => void