Skip to content
On this page

Toolbar 工具栏

工具栏就用它

基本使用

工具栏的基本使用,icon 可以配置带有图表的选项

开启

不同大小

size 属性可以配置不同的大小

开启

圆角

round 属性为圆角

开启

背景色

background 可以自定义背景色

text-color 可以自定义文字颜色

开启

点击事件

f-toolbar 采用事件委托,可以给 f-toolbar 添加事件,并给每个 f-toolbar-item 添加唯一的 index,那么在 click 的回调中就可以解构出 key 用于区分

也可以给每个 f-toolbar-item 单独添加点击事件

开启

Toolbar Attributes

参数说明类型可选值默认值
size尺寸FightingSizelarge middle small minilarge
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自定义 iconFightingIcon————
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

Contributors