80 lines
2.2 KiB
Markdown
80 lines
2.2 KiB
Markdown
|
# PluginSidebarMoreMenuItem
|
||
|
|
|
||
|
|
此插槽用于允许从“选项”下拉菜单中打开 `<PluginSidebar />` 面板。
|
||
|
|
当注册 `<PluginSidebar />` 时，系统会自动使用 `<PluginSidebar />` 的标题属性注册 `<PluginSidebarMoreMenuItem />`，因此无需使用此插槽来创建菜单项。
|
||
|
|
|
||
|
|
## 示例
|
||
|
|
|
||
|
|
此示例展示了如何自定义菜单项的文本，而不是使用 `<PluginSidebar />` 标题提供的默认文本。
|
||
|
|
|
||
|
|
```js
|
||
|
|
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,
|
||
|
|
} );
|
||
|
|
```
|
||
|
|
|
||
|
|
## 位置
|
||
|
|
|
||
|
|
|