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
AlignmentMatrixControl.Icon
Props
disablePointerEvents
- Type:
boolean
- Required: No
- Default:
true
If true
, disables pointer events on the icon.
value
- Type:
"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
- Required: No
- Default:
center
The current alignment value.