ToolbarButton 可用于向工具栏添加操作，通常在用于创建通用界面时位于 Toolbar 或 ToolbarGroup 内。如果您将其用于向自定义区块添加控件，则应考虑使用 BlockControls。

它具有与 Button 组件类似的功能。使用 ToolbarButton 可确保按钮在工具栏中的样式正确，并确保工具栏中的键盘交互符合 WAI-ARIA 工具栏模式。

用法

若要创建通用界面，您需要在 Toolbar 组件中渲染 ToolbarButton。

import { Toolbar, ToolbarButton } from '@wordpress/components';
import { pencil } from '@wordpress/icons';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarButton
                icon={ pencil }
                label="Edit"
                onClick={ () => alert( 'Editing' ) }
            />
        </Toolbar>
    );
}

在 BlockControls 内部

如果您正在开发自定义区块并想向区块工具栏添加控件，则应使用 BlockControls。可选择将其包裹在 ToolbarGroup 中。

import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { pencil } from '@wordpress/icons';

function Edit() {
    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarButton
                    icon={ pencil }
                    label="Edit"
                    onClick={ () => alert( 'Editing' ) }
                />
            </ToolbarGroup>
        </BlockControls>
    );
}

属性

此组件除了接受以下额外属性外，还接受 与 Button 相同的 API：

containerClassName: string

应用于按钮容器的可选附加类名。

  • 必填：否

subscript: string

按钮的可选下标文本。

  • 必填：否

相关组件

  • 如果您希望实现一个作为图标按钮分组的选项选择控件，可以使用 Toolbar 组件，它已处理此策略。
  • ToolbarButton 可与其他元素（如 Dropdown）配合使用，以弹出框形式显示选项。