工具栏可用于对相关的选项进行分组。为了强调一组相关的图标按钮，工具栏应共享一个共同的容器。

图像块上方的工具栏组件

设计规范

用法

最佳实践

工具栏应该：

  • 清楚地传达点击或触摸将触发操作。
  • 适当使用既定颜色。例如，仅对难以或无法撤消的操作使用红色。
  • 当与区块一起使用时，在区块上方具有一致的位置。否则，在界面中具有一致的位置。

附加到区块左上角的工具栏。（1. 工具栏，2. 区块）

状态

活动和可用的工具栏

工具栏的状态使其清楚哪个图标按钮处于活动状态。悬停和聚焦状态表达了工具栏中图标按钮的可用选择选项。

工具栏组件

禁用的工具栏

无法选择的工具栏可以赋予禁用状态，或者被隐藏。

开发规范

用法

import { Toolbar, ToolbarButton } from '@wordpress/components';
import { formatBold, formatItalic, link } from '@wordpress/icons';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarButton icon={ formatBold } label="Bold" />
            <ToolbarButton icon={ formatItalic } label="Italic" />
            <ToolbarButton icon={ link } label="Link" />
        </Toolbar>
    );
}

属性

Toolbar 会将所有 HTML 属性传递给底层元素。此外，您还可以传递下面指定的自定义属性。

className: string

设置在容器 div 上的类名。

  • 必填：否

label: string

工具栏的可访问性标签。

  • 必填：是

variant: ‘unstyled’ | undefined

指定工具栏的样式。

留空以使用默认样式。或者 'unstyled'，它从工具栏中移除边框，但保留默认的弹出层样式。

  • 必填：否
  • 默认值：undefined

orientation: ‘horizontal’ | ‘vertical’

指定工具栏的方向。

留空或设置为 'horizontal' 以实现水平方向的键盘交互，选择 'vertical' 则实现垂直方向。

  • 必填：否
  • 默认值：horizontal

相关组件