Resizable Panels

A flexible, accessible, and customizable container for resizable panels and draggable handles.

Introduction

The Resizable Panels component provides a container for creating resizable, draggable, and collapsible panels. It is highly customizable and supports both horizontal and vertical layouts.

Default Use Case: Horizontal Resizable Panels

One

Two

Three

Installation

Install the resizable component:

npx axionjs-ui add resizable

Vertical Layout Panels

Sidebar

Content

Collapsible Panels

Collapsible Panel 1

File Structure

resizable.tsx

Prop Types

Prop	Type	Default
`direction`	`"horizontal" \| "vertical"`	-
`minSize`	`number`	-
`collapsible`	`boolean`	-
`ariaLabel`	`string`	-

Features

Horizontal and Vertical Layouts:
- Flexible orientation for resizing.
Collapsible Panels:
- Allows panels to be hidden when not needed.
Keyboard Navigation:
- Full support for arrow keys and screen readers.

Accessibility

Keyboard Support:
- Navigate between panels using arrow keys.
ARIA Attributes:
- Implements aria-label for accessibility.
Screen Reader Support:
- Fully compatible with assistive technologies.

Conclusion

The Resizable Panels component is a robust and flexible solution for creating interactive resizable layouts. Its accessibility and customization options make it ideal for modern interfaces.