云策 WordPress 开发者社区

块编辑器开发文档

ToolsPanelHeader

查看官方原文 ↗
💡 云策文档标注

概述

ToolsPanelHeader 是一个实验性组件，用于渲染工具面板的标题和菜单。它通常由父组件 ToolsPanel 自动生成，不建议直接使用。

关键要点

  • 组件状态为实验性，可能发生重大变更
  • 主要功能是提供面板标题和下拉菜单
  • 通过 Props 配置菜单、标题级别、标签和回调函数

Props 说明

  • dropdownMenuProps: 可选，用于配置 DropdownMenu 的属性
  • headingLevel: 可选，设置标题级别，默认值为 2
  • label: 必填，面板标题的文本标签
  • resetAll: 必填，重置所有控件值的回调函数
  • toggleItem: 必填，切换单个控件菜单项的回调函数
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

This component renders a tools panel’s header including a menu.

Usage

This component is generated automatically by its parent
ToolsPanel.

In general, this should not be used directly.

Props

dropdownMenuProps: {}

The dropdown menu props to configure the panel’s DropdownMenu.

  • Type: DropdownMenuProps
  • Required: No

headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'

The heading level of the panel’s header.

  • Required: No
  • Default: 2

label: string

Text to be displayed within the panel header. It is also passed along as the
label for the panel header’s DropdownMenu.

  • Required: Yes

resetAll: () => void

The resetAll prop provides the callback to execute when the “Reset all” menu
item is selected. Its purpose is to facilitate resetting any control values
for items contained within this header’s panel.

  • Required: Yes

toggleItem: ( label: string ) => void

This is executed when an individual control’s menu item is toggled. It
will update the panel’s menu item state and call the panel item’s onSelect or
onDeselect callbacks as appropriate.

  • Required: Yes