AlignmentMatrixControl Edit

This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

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

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 ) }
        />
    );
};

Top ↑

Props

The component accepts the following props:

Top ↑

className

The class that will be added to the classes of the wrapper component.

  • Type: string
  • Required: No

Top ↑

id

Unique ID for the component.

  • Type: string
  • Required: No

Top ↑

label

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

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

Top ↑

defaultValue

If provided, sets the default alignment value.

  • Type: string
  • Required: No
  • Default: center center

Top ↑

value

The current alignment value.
– Type: string
– Required: No

Top ↑

onChange

A function that receives the updated alignment value.

  • Type: ( nextValue: string ) => void
  • Required: No

Top ↑

width

If provided, sets the width of the wrapper component.

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