Components / Resizable
Resizable
Split-pane resizable container with drag handle, horizontal/vertical direction, and size bounds.
layout v0.8.0
Playground
Examples
Horizontal split
Left
Right
<cg-resizable style="height:240px;"><div slot="panel-1" style="background:#1a1a1a;padding:16px;">Left</div><div slot="panel-2" style="background:#242424;padding:16px;">Right</div></cg-resizable>Import
import { CgResizable } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-resizable';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "horizontal"|"vertical" | "horizontal" | Split direction |
defaultSize | number | 0.5 | Initial pane 1 fraction |
min | number | 0.1 | Minimum pane 1 fraction |
max | number | 0.9 | Maximum pane 1 fraction |
Events
| Event | Detail | Description |
|---|---|---|
cg-resizable-change | {size} | Pane size changed |