title: "PluginSidebar" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Slotfills - Reference Guides - Repos
PluginSidebar
此插槽允许向文章编辑器或站点编辑器屏幕的工具栏添加项目。
使用此插槽将在工具栏中添加一个图标，点击该图标会打开一个面板，其中包含包裹在 <PluginSidebar /> 组件中的项目。
此外，它还会创建一个 <PluginSidebarMoreMenuItem />，点击时可以从选项面板打开该面板。
示例
import { __ } from '@wordpress/i18n';
import { PluginSidebar } from '@wordpress/editor';
import {
PanelBody,
Button,
TextControl,
SelectControl,
} from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';
import { useState } from '@wordpress/element';
const PluginSidebarExample = () => {
const [ text, setText ] = useState( '' );
const [ select, setSelect ] = useState( 'a' );
return (
<PluginSidebar
name="plugin-sidebar-example"
title={ __( 'My PluginSidebar' ) }
icon={ 'smiley' }
>
<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-example', { render: PluginSidebarExample } );
位置
