云策 WordPress 开发者社区

块编辑器开发文档

ToggleGroupControlOption

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

概述

ToggleGroupControlOption 是一个实验性的表单组件，作为 ToggleGroupControl 的子组件使用，用于定义切换组中的选项。它支持标签、值和工具提示等属性。

关键要点

  • ToggleGroupControlOption 是实验性组件，可能发生重大变更。
  • 必须作为 ToggleGroupControl 的子组件使用。
  • 必需属性包括 label（字符串）和 value（字符串或数字）。
  • 可选属性 showTooltip（布尔值）控制悬停时是否显示工具提示。

代码示例

import {
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

function Example() {
    return (
        <ToggleGroupControl
            label="my label"
            value="vertical"
            isBlock
            __next40pxDefaultSize
        >
            <ToggleGroupControlOption
                value="horizontal"
                label="Horizontal"
                showTooltip={ true }
            />
            <ToggleGroupControlOption value="vertical" label="Vertical" />
        </ToggleGroupControl>
    );
}

注意事项

  • 实验性组件，使用时需注意兼容性和稳定性风险。
  • label 属性是必需的，aria-label 可用于辅助技术。
  • showTooltip 优先使用 aria-label，其次使用 label 作为工具提示文本。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

ToggleGroupControlOption is a form component and is meant to be used as a child of ToggleGroupControl.

Usage

import {
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

function Example() {
    return (
        <ToggleGroupControl
            label="my label"
            value="vertical"
            isBlock
            __next40pxDefaultSize
        >
            <ToggleGroupControlOption
                value="horizontal"
                label="Horizontal"
                showTooltip={ true }
            />
            <ToggleGroupControlOption value="vertical" label="Vertical" />
        </ToggleGroupControl>
    );
}

Props

label: string

Label for the option. If needed, the aria-label prop can be used in addition to specify a different label for assistive technologies.

  • Required: Yes

value: string | number

The value of the ToggleGroupControlOption.

  • Required: Yes

showTooltip: boolean

Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the aria-label prop text first, then the label prop text if no aria-label prop is found.

  • Required: No