云策 WordPress 开发者社区

块编辑器开发文档

ToggleGroupControlOptionIcon

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

概述

ToggleGroupControlOptionIcon 是一个实验性的表单组件，用于作为 ToggleGroupControl 的子组件，通过图标展示选项。它适用于 WordPress 区块编辑器开发，提供图标化的交互界面。

关键要点

  • 组件为实验性功能，可能发生重大变更，需谨慎使用
  • 必须作为 ToggleGroupControl 的子组件使用，用于显示图标选项
  • 核心属性包括 value（选项值）、icon（图标组件）和 label（可访问标签和工具提示文本），均为必需

代码示例

import {
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { formatLowercase, formatUppercase } from '@wordpress/icons';

function Example() {
    return (
        <ToggleGroupControl __next40pxDefaultSize>
            <ToggleGroupControlOptionIcon
                value="uppercase"
                icon={ formatUppercase }
                label="Uppercase"
            />
            <ToggleGroupControlOptionIcon
                value="lowercase"
                icon={ formatLowercase }
                label="Lowercase"
            />
        </ToggleGroupControl>
    );
}

注意事项

由于是实验性组件，建议在非生产环境中测试，并关注 WordPress 更新以应对可能的 API 变化。

📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

ToggleGroupControlOptionIcon is a form component which is meant to be used as a child of ToggleGroupControl and displays an icon.

Usage

import {
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { formatLowercase, formatUppercase } from '@wordpress/icons';

function Example() {
    return (
        <ToggleGroupControl __next40pxDefaultSize>
            <ToggleGroupControlOptionIcon
                value="uppercase"
                icon={ formatUppercase }
                label="Uppercase"
            />
            <ToggleGroupControlOptionIcon
                value="lowercase"
                icon={ formatLowercase }
                label="Lowercase"
            />
        </ToggleGroupControl>
    );
}

Props

value: string | number

The value of the ToggleGroupControlOption.

  • Required: Yes

icon: Component

Icon displayed as the content of the option. Usually one of the icons from the @wordpress/icons package, or a custom React <svg> icon.

  • Required: Yes

label: string

The text to accessibly label the icon option. Will also be shown in a tooltip.

  • Required: Yes