AlignmentMatrixControl

查看官方原文 ↗

💡 云策文档标注

概述

AlignmentMatrixControl 是 WordPress 组件库中的一个控件，用于调整 UI 元素的水平和垂直对齐方式。它提供矩阵式交互界面，支持多种对齐选项，并可通过 Props 进行配置。

关键要点

AlignmentMatrixControl 用于设置对齐值，如 'center center'、'top left' 等。
主要 Props 包括 value、onChange、defaultValue、label 和 width，用于控制对齐状态和样式。
包含子组件 AlignmentMatrixControl.Icon，具有 disablePointerEvents 和 value Props。

代码示例

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

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

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

注意事项

使用前需导入 @wordpress/components 和 @wordpress/element。对齐值必须符合指定类型，如 'center' 或 'top left' 等组合。Props 如 defaultValue 和 label 是可选的，但 value 和 onChange 通常用于状态管理。

📄 原文内容

See the WordPress Storybook for more detailed, interactive documentation.

AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.

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`

Type: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
Required: No
Default: 'center center'

If provided, sets the default alignment value.

`label`

Type: string
Required: No
Default: 'Alignment Matrix Control'

Accessible label. If provided, sets the aria-label attribute of the
underlying grid widget.

`onChange`

Type: ((newValue: AlignmentMatrixControlValue) => void)
Required: No

A function that receives the updated alignment value.

`value`

Type: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
Required: No

The current alignment value.

`width`

Type: number
Required: No
Default: 92

If provided, sets the width of the control.

Subcomponents