切换控件

ToggleControl 用于生成一个切换式用户界面。

用法

渲染一个用于更改固定背景设置的界面。

import { useState } from 'react';
import { ToggleControl } from '@wordpress/components';

const MyToggleControl = () => {
    const [ hasFixedBackground, setHasFixedBackground ] = useState( false );

    return (
        <ToggleControl
            label="Fixed Background"
            help={
                hasFixedBackground
                    ? 'Has fixed background.'
                    : 'No fixed background.'
            }
            checked={ hasFixedBackground }
            onChange={ (newValue) => {
                setHasFixedBackground( newValue );
            } }
        />
    );
};

属性

该组件接受以下属性：

label

如果添加了此属性，将使用 label 属性的值作为内容生成标签。

• 类型：String
• 是否必需：否

help

如果添加了此属性，将使用 help 属性的值作为内容生成帮助文本。
对于受控组件，help 属性也可以是一个函数，它将根据布尔类型的 checked 参数动态返回帮助文本。

• 类型：String|Element|Function
• 是否必需：否

checked

如果 checked 为 true，则切换开关处于选中状态。如果 checked 为 false，则切换开关处于未选中状态。
如果未传递任何值，则切换开关将是一个非受控组件，初始值为未选中状态。

• 类型：Boolean
• 是否必需：否

disabled

如果 disabled 为 true，则切换开关将被禁用并应用相应的样式。

• 类型：Boolean
• 是否必需：否

onChange

一个接收选中状态（布尔值）作为输入的函数。

• 类型：function
• 是否必需：否

className

添加到包装器 div 的类名中，与 components-base-control 和 components-toggle-control 一起使用。如果未传递 className，则仅使用 components-base-control 和 components-toggle-control。

• 类型：String
• 是否必需：否