-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
README.md
80 lines (52 loc) · 1.55 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
# AlignmentMatrixControl
<div class="callout callout-alert">
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
</div>
AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
## Usage
```jsx
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`