此功能仍处于实验阶段。“Experimental”（实验性）意味着这是早期实现，可能会发生剧烈且破坏性的更改。

ToggleGroupControl 是一个表单组件，允许用户在水平分段中选择的选项。要为此控件渲染选项，请使用 ToggleGroupControlOption 组件。

此组件旨在从一组选项中选择一个持久的单一值，类似于单选按钮组的工作方式。如果您只是想要一个切换开关来在视图之间切换，请改用来自 @wordpress/ui 的 Tabs。

仅在确定内部项目标签不会换行时才使用此控件。对于标签较长的项目，您可以考虑改用 SelectControl 或 CustomSelectControl 组件。

用法

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

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

属性

help: ReactNode

如果添加了此属性，将使用 help 属性的内容生成帮助文本。

  • 必填：否

hideLabelFromVision: boolean

如果为 true，则标签仅对屏幕阅读器可见。

  • 必填：否
  • 默认值：false

isAdaptiveWidth: boolean

确定是否应使用相等宽度呈现分段。

  • 必填：否
  • 默认值：false

isDeselectable: boolean

是否可以通过再次点击来取消选择某个选项。

  • 必填：否
  • 默认值：false

isBlock: boolean

将 ToggleGroupControl 渲染为（CSS）块元素，占据可用空间的整个宽度。当选项基于文本而非图标时，这是推荐的样式。

  • 必填：否
  • 默认值：false

label: string

表单元素的标签。

  • 必填：是

onChange: ( value?: string | number ) => void

选中某个分段时的回调函数。

  • 必填：否
  • 默认值：() => {}

value: string | number

ToggleGroupControl 的值。

  • 必填：否

disabled: boolean

如果为 true，则所有选项均不可选。所选值保持不变。

  • 必填：否
  • 默认值：false