工具栏下拉菜单

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

它具有与 DropdownMenu 组件类似的功能。使用 ToolbarDropdownMenu 将确保工具栏中的键盘交互与 WAI-ARIA 工具栏模式 保持一致。

用法

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

import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
import {
    more,
    arrowLeft,
    arrowRight,
    arrowUp,
    arrowDown,
} from '@wordpress/icons';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarDropdownMenu
                icon={ more }
                label="Select a direction"
                controls={ [
                    {
                        title: 'Up',
                        icon: arrowUp,
                        onClick: () => console.log( 'up' ),
                    },
                    {
                        title: 'Right',
                        icon: arrowRight,
                        onClick: () => console.log( 'right' ),
                    },
                    {
                        title: 'Down',
                        icon: arrowDown,
                        onClick: () => console.log( 'down' ),
                    },
                    {
                        title: 'Left',
                        icon: arrowLeft,
                        onClick: () => console.log( 'left' ),
                    },
                ] }
            />
        </Toolbar>
    );
}

在 BlockControls 内部

如果您正在开发自定义区块并希望在区块工具栏中添加控件，则应改用 BlockControls。

import { BlockControls } from '@wordpress/block-editor';
import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
import {
    more,
    arrowLeft,
    arrowRight,
    arrowUp,
    arrowDown,
} from '@wordpress/icons';

function Edit() {
    return (
        <BlockControls group="block">
            <ToolbarDropdownMenu
                icon={ more }
                label="Select a direction"
                controls={ [
                    {
                        title: 'Up',
                        icon: arrowUp,
                        onClick: () => console.log( 'up' ),
                    },
                    {
                        title: 'Right',
                        icon: arrowRight,
                        onClick: () => console.log( 'right' ),
                    },
                    {
                        title: 'Down',
                        icon: arrowDown,
                        onClick: () => console.log( 'down' ),
                    },
                    {
                        title: 'Left',
                        icon: arrowLeft,
                        onClick: () => console.log( 'left' ),
                    },
                ] }
            />
        </BlockControls>
    );
}

属性

此组件接受 与 DropdownMenu 组件相同的 API。