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