TabPanel 是一个用于渲染符合 ARIA 规范的 TabPanel 的 React 组件。

TabPanels 用于跨不同屏幕、数据集和交互组织内容。它包含两个部分：选项卡列表，以及在选中选项卡时显示的内容视图。

侧边栏 TabPanel 中选中的“文档”选项卡。

设计指南

用法

TabPanels 用于组织和允许在相关且处于同一层级的内容组之间进行导航。

一组中的选项卡

作为一组，所有选项卡都由一个共享的主题统一。为了清晰起见，每个选项卡应包含与该组中其他所有选项卡不同的内容。

结构

选项卡面板

  1. 容器
  2. 活动文本标签
  3. 活动选项卡指示器
  4. 非活动文本标签
  5. 选项卡项

标签

选项卡标签以单行显示，使用相同的字体和大小。使用清晰简洁地描述选项卡内容的文本标签，并确保一组选项卡包含具有共同特征的项目组合。

选项卡标签可以换行到第二行，但不要添加第二行选项卡。

活动选项卡指示器

为了区分活动选项卡和非活动选项卡，请对活动选项卡的文本和图标应用下划线和颜色更改。

下划线和颜色更改将活动选项卡与非活动选项卡区分开来。

行为

用户可以通过按键盘上的 Tab 键在选项卡之间导航。

放置

将选项卡放置在内容上方。选项卡控制其下方显示的 UI 区域。

开发指南

用法

import { TabPanel } from '@wordpress/components';

const onSelect = ( tabName ) => {
    console.log( 'Selecting tab', tabName );
};

const MyTabPanel = () => (
    <TabPanel
        className="my-tab-panel"
        activeClass="active-tab"
        onSelect={ onSelect }
        tabs={ [
            {
                name: 'tab1',
                title: 'Tab 1',
                className: 'tab-one',
            },
            {
                name: 'tab2',
                title: 'Tab 2',
                className: 'tab-two',
            },
        ] }
    >
        { ( tab ) => <p>{ tab.title }</p> }
    </TabPanel>
);

属性

该组件接受以下 props：

className

分配给 TabPanel 外部容器的类

  • 类型：String
  • 必需：否
  • 默认值：''

orientation

选项卡列表的方向（vertical 或 horizontal）

  • 类型：String
  • 必需：否
  • 默认值：horizontal

onSelect

选中选项卡时调用的函数。它将 tabName 作为参数传递。

  • 类型：Function
  • 必需：否
  • 默认值：noop

tabs

包含以下属性的对象数组：

  • name：(string) 定义选项卡的键。
  • title：(string) 定义选项卡的翻译文本。
  • className：(string) 可选。定义要应用于选项卡的类。
  • icon：(ReactNode) 可选。设置时，会在选项卡标题位置显示图标。然后标题将呈现为 aria-label 和 tooltip。
  • disabled：(boolean) 可选。确定选项卡是否应被禁用或可选择。

注意： 如果愿意，可以向对象添加其他字段并从子函数中访问它们。

  • 类型：Array
  • 必需：是

activeClass

添加到活动选项卡的类

  • 类型：String
  • 必需：否
  • 默认值：is-active

initialTabName

组件挂载时要选中的选项卡名称。如果未设置此 prop，则默认选择第一个选项卡。

  • 类型：String
  • 必需：否
  • 默认值：无

selectOnMove

当 true 时，获得焦点时将选中选项卡（自动激活选项卡）。当 false 时，仅在点击时选中选项卡（手动激活选项卡）。有关更多信息，请参阅 官方 W3C 文档。

  • 类型：boolean
  • 必需：否
  • 默认值：true

children

一个根据选中选项卡渲染选项卡视图的函数。该函数将活动选项卡对象作为参数传递，如 tabs prop 所定义。

  • 类型：(Object) => Element
  • 必需：是