README.md

AlignmentMatrixControl

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

Usage

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

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

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

Props

The component accepts the following props:

className

The class that will be added to the classes of the underlying grid widget.

• Type: string
• Required: No

id

Unique ID for the component.

• Type: string
• Required: No

label

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

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

defaultValue

If provided, sets the default alignment value.

• Type: AlignmentMatrixControlValue
• Required: No
• Default: center center

value

The current alignment value.

• Type: AlignmentMatrixControlValue
• Required: No

onChange

A function that receives the updated alignment value.

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

width

If provided, sets the width of the control.

• Type: number
• Required: No
• Default: 92