AlignmentMatrixControl Edit
AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
Usage Usage
import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const Example = () => { const [ alignment, setAlignment ] = useState( 'center center' ); return ( <AlignmentMatrixControl value={ alignment } onChange={ ( newAlignment ) => setAlignment( newAlignment ) } /> ); };
Props Props
The component accepts the following props:
className className
The class that will be added to the classes of the wrapper component.
- Type:
string
- Required: No
id id
Unique ID for the component.
- Type:
string
- Required: No
label label
Accessible label. If provided, sets the aria-label
attribute of the underlying component.
- Type:
string
- Required: No
- Default:
Alignment Matrix Control
defaultValue defaultValue
If provided, sets the default alignment value.
- Type:
string
- Required: No
- Default:
center center
value value
The current alignment value.
– Type: string
– Required: No
onChange onChange
A function that receives the updated alignment value.
- Type:
( nextValue: string ) => void
- Required: No
width width
If provided, sets the width of the wrapper component.
- Type:
number
- Required: No
- Default:
92