Toolbar

2 min read

工具栏。

import { Menu, Toolbar } from '@antv/x6-react-components'
import '@antv/x6-react-components/es/menu/style/index.css'
import '@antv/x6-react-components/es/toolbar/style/index.css'

const Item = Toolbar.Item 
const Group = Toolbar.Group

<Toolbar onClick={this.onClick} extra={<span>Extra Component</span>}>
  <Group>
    <Item name="zoomIn" tooltip="Zoom In (Cmd +)" icon={<ZoomInOutlined />} />
    <Item name="zoomOut" tooltip="Zoom Out (Cmd -)" icon={<ZoomOutOutlined />} />
  </Group>
  <Group>
    <Item name="undo" tooltip="Undo (Cmd + Z)" icon={<UndoOutlined />} />
    <Item name="redo" tooltip="Redo (Cmd + Shift + Z)" icon={<RedoOutlined />} />
  </Group>
  <Group>
    <Item name="delete" icon={<DeleteOutlined />} disabled={true} tooltip="Delete (Delete)" />
  </Group>
  <Group>
    <Item name="bold" icon={<BoldOutlined />} active={true} tooltip="Bold (Cmd + B)" />
    <Item name="italic" icon={<ItalicOutlined />} tooltip="Italic (Cmd + I)" />
    <Item name="strikethrough" icon={<StrikethroughOutlined />} tooltip="Strikethrough (Cmd + Shift + x)" />
    <Item name="underline" icon={<UnderlineOutlined />} tooltip="Underline (Cmd + U)" />
  </Group>
</Toolbar>

Toolbar

参数说明类型默认值
className自定义样式名string-
extra工具栏右侧的额外组件ReactNode-
size工具栏大小'small' | 'big'-
align工具对齐方式'left' | 'right'-
hoverEffect鼠标 Hover 时是否显示一个圆角背景booleanfalse
onClick点击工具栏的回调函数(name: string, value?: any) => void-

Toolbar.Group

参数说明类型默认值
className自定义样式名string-

Toolbar.Item

参数说明类型默认值
className自定义样式名string-
name工具项名称string-
icon工具项图标ReactNode-
text显示的文本string | ReactNode-
hidden是否隐藏boolean-
disabled是否禁用boolean-
active是否被激活boolean-
tooltip工具提示文本string-
tooltipPropsTooltip 组件的选项TooltipProps-
tooltipAsTitle是否将提示文本作为工具项的 title 属性boolean-
dropdown下拉菜单ReactNode-
dropdownArrow是否显示下拉菜单箭头boolean-
dropdown下拉菜单的选项Dropdown.Props-
onClick点击工具项的回调函数(name?: string) => void-