ToolbarItem 是一个通用的无头组件，可用于将任何自定义组件变为 Toolbar 项。当用于创建通用界面时，它应位于 Toolbar 或 ToolbarGroup 内部。如果你使用它来为自定义区块添加控件，建议改用 BlockControls。

用法

as 属性

你可以将 as 属性与自定义组件或任何 HTML 元素一起使用。

import { Toolbar, ToolbarItem, Button } from '@wordpress/components';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
            <ToolbarItem as="button">I am another toolbar button</ToolbarItem>
        </Toolbar>
    );
}

render 属性

你可以将子元素作为函数传递，以获取 ToolbarItem 的属性并将其传递给另一个组件。

import { Toolbar, ToolbarItem, DropdownMenu } from '@wordpress/components';
import { table } from '@wordpress/icons';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarItem>
                { ( toolbarItemHTMLProps ) => (
                    <DropdownMenu
                        icon={ table }
                        toggleProps={ toolbarItemHTMLProps }
                        label={ 'Edit table' }
                        controls={ [] }
                    />
                ) }
            </ToolbarItem>
        </Toolbar>
    );
}

在 BlockControls 内部

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

import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';

function Edit() {
    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
            </ToolbarGroup>
        </BlockControls>
    );
}

相关组件