chrome:shell.skip
chrome:nav.docs chrome:nav.cdk chrome:nav.components blocks:nav.blocks chrome:nav.tools chrome:nav.contribute chrome:nav.about
generated:catalog.area.components
generated:catalog.entry.accordion.title generated:catalog.entry.card.title generated:catalog.entry.carousel.title generated:catalog.entry.aspect-ratio.title generated:catalog.entry.resizable.title generated:catalog.entry.separator.title

generated:catalog.entry.resizable.title

generated:catalog.entry.resizable.description

@xngui/components/resizable
import { XResizable, XResizablePanel } from '@xngui/components/resizable';

chrome:demo.section

chrome:demo.preview

demo-preview:resizable.split-panels

Handle is added automatically — drag to resize, double-tap to reset.

demo-preview:resizable.primary-panel
Secondary — drag the handle or double-tap it.

Split: 50% · default 50%

demo-preview:resizable.edge-resize

VS Code–style workspace — sidebar resizes from the demo-preview:resizable.end edge.

demo-preview:resizable.resizable-demo-ts

Drag the sash on the sidebar edge. Double-tap to reset width to 280px or maximize to 480px.

Sidebar: 280px

demo-preview:hints.category.navigation:
Tab
demo-preview:hints.category.focus:
Focus
demo-preview:hints.category.pointer:
DragDbl-click
import { Component } from '@angular/core';
import { XResizable, XResizablePanel } from '@xngui/components/resizable';
 
@Component({
selector: 'app-example',
imports: [XResizable, XResizablePanel],
templateUrl: './resizable.component.html',
})
export class ExampleComponent {}

chrome:demo.events.title

chrome:demo.events.empty

chrome:demo.api.title

[xResizable]

chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
orientation
XOrientation
'horizontal'
Split axis — `horizontal` places panels side by side.
edge
XPosition
—
Logical edge for single-element resize (`start` / `end` / `top` / `bottom`).
defaultSize
number
—
Target size for `handleAction="reset"`.
minSize
number
—
Minimum size in split % or element px.
maxSize
number
—
Maximum size in split % or element px.
handleAction
XResizableHandleAction
'reset'
Double-click / double-tap on the handle (VS Code–style).