对齐矩阵控件

查看 WordPress Storybook 以获取更详细、交互式的文档。

AlignmentMatrixControl 组件用于调整用户界面中的水平和垂直对齐方式。

import { AlignmentMatrixControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const Example = () => {
    const [ alignment, setAlignment ] = useState( 'center center' );

    return (
        <AlignmentMatrixControl
            value={ alignment }
            onChange={ setAlignment }
        />
    );
};

Props

defaultValue

• 类型："center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
• 是否必需：否
• 默认值：'center center'

如果提供，则设置默认的对齐值。

label

• 类型：string
• 是否必需：否
• 默认值：'Alignment Matrix Control'

无障碍标签。如果提供，则设置底层 grid 小部件的 aria-label 属性。

onChange

• 类型：((newValue: AlignmentMatrixControlValue) => void)
• 是否必需：否

接收更新后对齐值的函数。

value

• 类型："center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
• 是否必需：否

当前的对齐值。

width

• 类型：number
• 是否必需：否
• 默认值：92

如果提供，则设置控件的宽度。

子组件

AlignmentMatrixControl.Icon

Props

disablePointerEvents

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

如果为 true，则禁用图标上的指针事件。

value

• 类型："center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
• 是否必需：否
• 默认值：center

当前的对齐值。