Skip to content

Resizable

@xngui/components/resizable
@xngui/components/resizable

Split panes and edge resize with auto-injected handles and VS Code–style double-tap.

Preview

Split Panels

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

Primary Panel
Secondary — drag the handle or double-tap it.

Split: 50% · default 50%

Edge Resize

VS Code–style workspace — sidebar resizes from the END edge.

Resizable Demo TS

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

Sidebar: 280px

import { Component } from '@angular/core';
import { XResizable } from '@xngui/components/resizable';
 
@Component({
selector: 'app-example',
imports: [XResizable],
templateUrl: './resizable.component.html',
})
export class ExampleComponent {}

Events

Interact with the preview — events will appear here.