面板

面板展开和折叠内容的多个部分。

设计指南

解剖

面板是内容的单个部分，可以根据需要展开或折叠。

1. 面板
2. 车身
3. 分隔器

用法

面板通过垂直展开和折叠列表内容来显示和隐藏列表项的详细信息。面板帮助用户只看到他们需要的内容。

何时使用面板

在以下情况下使用面板：

• 请参阅内容的多个相关部分的概述。
• 根据需要显示和隐藏这些节。
• 隐藏用户不需要一直看到的优先级较低的信息。
• 一次查看多个分区。

在以下情况下考虑替代组件：

• 有一些关键信息或错误消息需要立即采取行动。
• 您只需要在几个部分之间快速切换（考虑改用Tabs）。

行为

展开和折叠

通过垂直展开和折叠列表内容来显示和隐藏现有面板项的详细信息。

可折叠面板用插入符号表示，展开时会翻转插入符号图标。插入符号优于加号或箭头图标，因为加号表示添加，箭头与导航密切相关。

如果内容很重要或很重要，则默认情况下应展开面板。默认情况下打开的面板应显示在顶部。

发展指南

这个面板创建一个带有可折叠标题的容器面板主体组件可以轻松创建用户友好的界面来影响状态和属性。

用法

从“@wordpress/components”导入{Panel、PanelBody、PanelRow}；从“@wordpress/icons”导入{more}；const MyPanel=（）=>(<面板标题=“我的面板”><PanelBody title=“我的区块设置”icon={more}initialOpen={true}><PanelRow>我的面板输入和标签</PanelRow></PanelBody></面板>);

子组件

面板

道具

收割台:一串

将呈现为面板标题的文本。文本将在
<h2>标签。

• 必需：否

类名:一串

要应用于包装元素的CSS类。

• 必需：否

儿童:反应。反应节点

要在面板行中显示的内容。

• 必需：是

---

面板主体

这个面板主体创建可打开或关闭的可折叠容器。

道具

标题:一串

标题文本。即使组件关闭，它也会显示。

• 必需：否

开的:布尔值

设置为时真的，组件将保持打开状态，无论initialOpen（初始打开）道具和
将防止面板关闭。

• 必需：否

类名:一串

要应用于包装元素的CSS类。

• 必需：否

偶像:JSX公司。元素

标题旁边显示的图标。

• 必需：否

打开切换:（下一个：boolean）=>void；

组件从关闭状态切换到其关闭状态时调用的函数
打开状态，反之亦然。

• 必需：否
• 违约：noop公司

initialOpen（初始打开）:布尔值

面板是否开始打开。

• 必需：否
• 违约：真的

儿童:|反应。ReactNode|（（props:{opened:boolean}）=>React。反应节点）

要在中显示的内容面板主体。如果为这个道具提供了一个函数，它将接收一个带有开的道具作为参数。

• 必需：否

按钮停止:WordPressComponentProps（忽略）

传递给按钮标题中的组件面板主体.

• 必需：否
• 违约：{}

打开后滚动:布尔值

当内容可见时，将其滚动到视图中。这提高了用户体验面板主体
组件堆叠在一个可滚动的容器中。

• 必需：否
• 违约：真的

---

面板行

面板行是一个通用容器，用于面板主体。它是一个弹性容器，顶部有间距边距。

道具

类名:一串

要应用于包装元素的CSS类。

• 必需：否

儿童:反应。反应节点

要在面板行中显示的内容。

• 必需：否

裁判

PanelRow接受将添加到包装器div的转发ref。用法：

<PanelRow className=“edit-post-post-schedule”ref={panelRowRef}>

---

面板标题

面板标题呈现面板。这由面板组件，因此通常不需要使用。

道具

标签:一串

将呈现为面板。将在<h2>标签。

• 必需：否

儿童:反应。反应节点

要在面板行中显示的内容。

• 必需：否

相关组件

• 要划分水平菜单访问的内容的相关部分，请使用选项卡面板