Resizable
Resizable is accessible resizable panel groups and layouts with keyboard support.
The Resizable follows the WAI-ARIA - Window Splitter Pattern for accessibility.
Keyboard Navigation
| Key | Description | State |
|---|---|---|
ArrowRight | Increases the value based on the keyboardStep value. | direction="horizontal" |
ArrowLeft | Decreases the value based on the keyboardStep value. | direction="horizontal" |
ArrowUp | Increases the value based on the keyboardStep value. | direction="vertical" |
ArrowDown | Decreases the value based on the keyboardStep value. | direction="vertical" |
Home | Sets the value to minSize. | - |
End | Sets the value to maxSize. | - |
ARIA Roles and Attributes
| Component | Roles and Attributes | Usage |
|---|---|---|
ResizableItem | id | Used to associate with ResizableTrigger. |
ResizableTrigger | role="separator" | Indicates that this is a separator. |
aria-controls | Sets the id of the associated ResizableItem. | |
aria-orientation | Sets "horizontal" or "vertical" based on the direction value. Default is "horizontal". | |
aria-valuemin | Sets the minSize value. Default is 0. | |
aria-valuemax | Sets the maxSize value. Default is 100. | |
aria-valuenow | Sets the current value. |
Edit this page on GitHub