69 lines
1.9 KiB
Markdown
69 lines
1.9 KiB
Markdown
|
# PluginSidebar
|
||
|
|
|
||
|
|
此插槽允许向文章或站点编辑器的工具栏添加项目。
|
||
|
|
使用此插槽将在工具栏中添加一个图标，点击该图标会打开一个面板，其中包含封装在 `<PluginSidebar />` 组件中的项目。
|
||
|
|
此外，它还会创建一个 `<PluginSidebarMoreMenuItem />`，点击该菜单项可以从选项面板中打开该面板。
|
||
|
|
|
||
|
|
## 示例
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
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={ __( '我的 PluginSidebar' ) }
|
||
|
|
icon={ 'smiley' }
|
||
|
|
>
|
||
|
|
<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-example', { render: PluginSidebarExample } );
|
||
|
|
```
|
||
|
|
|
||
|
|
## 位置
|
||
|
|
|
||
|
|
|