title: "PluginSidebarMoreMenuItem" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Slotfills - Reference Guides - Repos
PluginSidebarMoreMenuItem
此插槽用于允许从选项下拉菜单中打开 <PluginSidebar /> 面板。
当注册 <PluginSidebar /> 时，系统会自动使用 <PluginSidebar /> 的 title 属性注册一个 <PluginSidebarMoreMenuItem />，因此无需使用此插槽来创建菜单项。
示例
此示例展示如何自定义菜单项的文本，而不是使用 <PluginSidebar /> 标题提供的默认文本。
import { __ } from '@wordpress/i18n';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
import {
PanelBody,
Button,
TextControl,
SelectControl,
} from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';
import { useState } from '@wordpress/element';
import { image } from '@wordpress/icons';
const PluginSidebarMoreMenuItemTest = () => {
const [ text, setText ] = useState( '' );
const [ select, setSelect ] = useState( 'a' );
return (
<>
<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
{ __( 'Custom Menu Item Text' ) }
</PluginSidebarMoreMenuItem>
<PluginSidebar
name="sidebar-name"
icon={ image }
title="My Sidebar"
>
<PanelBody>
<h2>
{ __(
'This is a heading for the PluginSidebar example.'
) }
</h2>
<p>
{ __(
'This is some example text for the PluginSidebar example.'
) }
</p>
<TextControl
__next40pxDefaultSize
label={ __( 'Text Control' ) }
value={ text }
onChange={ ( newText ) => setText( newText ) }
/>
<SelectControl
label={ __( 'Select Control' ) }
value={ select }
options={ [
{ value: 'a', label: __( 'Option A' ) },
{ value: 'b', label: __( 'Option B' ) },
{ value: 'c', label: __( 'Option C' ) },
] }
onChange={ ( newSelect ) => setSelect( newSelect ) }
/>
<Button variant="primary">
{ __( 'Primary Button' ) }{ ' ' }
</Button>
</PanelBody>
</PluginSidebar>
</>
);
};
registerPlugin( 'plugin-sidebar-more-menu-item-example', {
render: PluginSidebarMoreMenuItemTest,
} );
位置
