PluginSidebarMoreMenuItem

此插槽用于允许从“选项”下拉菜单中打开 <PluginSidebar /> 面板。
当注册 <PluginSidebar /> 时，系统会自动使用 <PluginSidebar /> 的标题属性注册 <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 }>
				{ __( '自定义菜单项文本' ) }
			</PluginSidebarMoreMenuItem>
			<PluginSidebar
				name="sidebar-name"
				icon={ image }
				title="我的侧边栏"
			>
				<PanelBody>
					<h2>
						{ __(
							'这是 PluginSidebar 示例的标题。'
						) }
					</h2>
					<p>
						{ __(
							'这是 PluginSidebar 示例的一些示例文本。'
						) }
					</p>
					<TextControl
						__nextHasNoMarginBottom
						__next40pxDefaultSize
						label={ __( '文本控件' ) }
						value={ text }
						onChange={ ( newText ) => setText( newText ) }
					/>
					<SelectControl
						label={ __( '选择控件' ) }
						value={ select }
						options={ [
							{ value: 'a', label: __( '选项 A' ) },
							{ value: 'b', label: __( '选项 B' ) },
							{ value: 'c', label: __( '选项 C' ) },
						] }
						onChange={ ( newSelect ) => setSelect( newSelect ) }
					/>
					<Button variant="primary">
						{ __( '主要按钮' ) }{ ' ' }
					</Button>
				</PanelBody>
			</PluginSidebar>
		</>
	);
};

registerPlugin( 'plugin-sidebar-more-menu-item-example', {
	render: PluginSidebarMoreMenuItemTest,
} );

2.2 KiB Raw Blame History

PluginSidebarMoreMenuItem

示例

位置

2.2 KiB

Raw Blame History