# Resizable
{"One"}
{"Two"}
{"Three"}
```astro
---
---
One
Two
Three
```
## Installation
```bash
bunx bejamas add resizable
```
```bash
npx bejamas add resizable
```
```bash
pnpm dlx bejamas add resizable
```
```bash
yarn dlx bejamas add resizable
```
## Usage
```astro nocollapse
---
---
One
Two
```
## Props
| Prop | Type | Default |
|---|---|---|
| direction | `"horizontal" \| "vertical"` | `"horizontal"` |
| keyboardResizeBy | `number` | |
| class | `string` | `""` |
## Examples
### Vertical
```astro
---
---
Header
Content
```
### Handle
```astro
---
---
Sidebar
Content
```
### Collapsible
```astro
---
---
Sidebar
Content
```
## API Reference
### Panel Constraints
Sizes are percentages of the group. Set them on each `ResizablePanel`:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `defaultSize` | `number` | even split | Initial size |
| `minSize` | `number` | `0` | Minimum size |
| `maxSize` | `number` | `100` | Maximum size |
| `collapsible` | `boolean` | `false` | Whether the panel can collapse below `minSize` |
| `collapsedSize` | `number` | `0` | Size when collapsed; must not exceed `minSize` |
### Events
The group emits custom events on its root element:
| Event | Detail | Description |
|-------|--------|-------------|
| `resizable:change` | `{ layout: number[] }` | Fired when the panel sizes change |
```js nocollapse
const group = document.getElementById('my-resizable');
group.addEventListener('resizable:change', (event) => {
console.log('Layout:', event.detail.layout);
});
```
### Programmatic Control
Dispatch `resizable:set` on the root with one size per panel. Values are normalized to 100% and clamped to each panel's constraints:
```js nocollapse
const group = document.getElementById('my-resizable');
group.dispatchEvent(new CustomEvent('resizable:set', {
detail: { layout: [30, 70] }
}));
```
### Keyboard
| Key | Action |
|-----|--------|
| `ArrowLeft` / `ArrowRight` | Resize a horizontal group by `keyboardResizeBy` percent |
| `ArrowUp` / `ArrowDown` | Resize a vertical group by `keyboardResizeBy` percent |
| `Shift` + arrow | Move to the limit in that direction |
| `Home` / `End` | Minimize / maximize the preceding panel |
| `Enter` | Toggle the preceding panel when it is collapsible |
| `F6` / `Shift` + `F6` | Focus the next / previous handle in the group |
### Data Attributes
| Attribute | Element | Description |
|-----------|---------|-------------|
| `data-direction` | group, panel, handle | Layout axis (`horizontal` or `vertical`) |
| `data-state` | panel | `expanded` or `collapsed` |
| `data-collapsed`, `data-expanded` | panel | Present for the matching state |
| `data-active` | handle | `pointer` while dragging, `keyboard` while focused |