面板可展开和折叠多个内容区域。

Panel 系列组件旨在用于区块检查器侧边栏。对于其他位置的折叠区域，请改用 CollapsibleCard 组件。

面板

设计规范

结构

面板是一个单一的内容区域，可根据需要展开或折叠。

面板结构

  1. 面板
  2. 主体
  3. 分隔线

用法

面板通过垂直展开和折叠列表内容来显示和隐藏列表项的详细信息。这有助于用户仅查看他们所需的内容。

何时使用面板

在以下情况下使用面板会有所帮助：

  • 查看多个相关内容区域的概览。
  • 根据需要显示和隐藏这些区域。
  • 隐藏那些优先级较低、用户无需一直查看的信息。
  • 同时查看多个区域。

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

  • 存在需要立即采取关键操作的关键信息或错误消息。
  • 需要在少数几个区域之间快速切换（建议改用选项卡）。

行为

展开与折叠

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

面板

可折叠的面板由一个指示箭头图标表示，展开时该图标会翻转。相比加号或箭头图标，使用箭头更合适，因为加号通常表示添加，而箭头与导航密切相关。

如果内容重要或必不可少，面板应默认处于展开状态。默认打开的面板应位于顶部。

开发规范

Panel 创建一个带有标题的容器，可以容纳可折叠的 PanelBody 组件，从而轻松创建友好的界面以影响状态和属性。

用法

import { Panel, PanelBody, PanelRow } from '@wordpress/components';
import { more } from '@wordpress/icons';

const MyPanel = () => (
    <Panel header="My Panel">
        <PanelBody title="My Block Settings" icon={ more } initialOpen={ true }>
            <PanelRow>My Panel Inputs and Labels</PanelRow>
        </PanelBody>
    </Panel>
);

子组件

Panel

Props
header: string

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

  • 必填：否
className: string

应用于包装元素的 CSS 类。

  • 必填：否
children: React.ReactNode

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

  • 必填：是

PanelBody

PanelBody 创建一个可折叠的容器，可以切换为打开或关闭状态。

Props
title: string

标题文本。即使组件处于关闭状态，也会显示。

  • 必填：否
opened: boolean

设置为 true 时，无论 initialOpen prop 如何，组件都将保持打开状态，并且面板将被禁止关闭。

  • 必填：否
className: string

应用于包装元素的 CSS 类。

  • 必填：否
icon: React.JSX.Element

显示在标题旁边的图标。

  • 必填：否
onToggle: ( next: boolean ) => void;

每当组件从其关闭状态切换到打开状态，或反之时被调用的函数。

  • 必填：否
  • 默认值：noop
initialOpen: boolean

面板是否初始处于打开状态。

  • 必填：否
  • 默认值：true
children: | React.ReactNode | ( ( props: { opened: boolean } ) => React.ReactNode )

要在 PanelBody 中显示的内容。如果为此 prop 提供函数，它将接收一个包含 opened prop 作为参数的对象。

  • 必填：否
buttonProps: WordPressComponentProps<Omit< ButtonAsButtonProps, ‘icon’ >, ‘button’, false>

传递给 PanelBody 中标题内的 Button 组件的 props。

  • 必填：否
  • 默认值：{}
scrollAfterOpen: boolean

当可见时将内容滚动到视图中。这在多个 PanelBody
组件堆叠在可滚动容器中时能改善用户体验。

  • 必填：否
  • 默认值：true

PanelRow

PanelRow 是 PanelBody 内行的通用容器。它是一个具有上边距用于间距的弹性容器。

Props
className: string

应用于包装元素的 CSS 类。

  • 必填：否
children: React.ReactNode

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

  • 必填：否
Ref

PanelRow 接受一个转发 ref，该 ref 将添加到包装 div 中。用法：

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

PanelHeader

PanelHeader 渲染 Panel 的头部。这是由 Panel 组件在底层使用的，因此通常不需要直接使用。

Props
label: string

将作为 Panel 标题呈现的文本。将渲染在 <h2> 标签中。

  • 必填：否
children: React.ReactNode

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

  • 必填：否

相关组件

  • 若要使用水平菜单访问的相关内容区域进行划分，请使用来自 @wordpress/ui 的 Tabs。