Component

Resizable

Draggable split panes. Lay panels out horizontally or vertically, drag or keyboard the handles between them, set default sizes and min/max limits, allow panels to collapse, and read the sizes as they change.

Two panels

Sidebar

Drag the divider →

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbResizableImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-resizable-basic',
  imports: [HbResizableImports],
  template: `
    <hb-resizable-group
      class="h-56 w-full max-w-xl overflow-hidden rounded-md border border-border"
    >
      <hb-resizable-panel
        [hbDefaultSize]="35"
        class="flex items-center justify-center bg-muted/40 p-4 text-sm"
      >
        Sidebar
      </hb-resizable-panel>

      <hb-resizable-handle />

      <hb-resizable-panel [hbDefaultSize]="65" class="flex items-center justify-center p-4 text-sm">
        Drag the divider →
      </hb-resizable-panel>
    </hb-resizable-group>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoResizableBasicComponent {}

Vertical & grip handle

Header

Body — drag the grip ↕

Limits, collapse & events

Files

Editor

Preview

sizes: 25, 50, 25

API reference

hb-resizable-group

Property	Description	Type	Default
[hbOrientation]	Split the panels side by side or stacked. The group needs a fixed width or height.	'horizontal' \| 'vertical'	'horizontal'
[hbKeyboardStep]	Percentage moved per arrow-key press on a focused handle (Home/End jump to min/max).	number	5
(hbResizeStart) / (hbResize) / (hbResizeEnd)	Emit an { sizes, orientation } event at the start, during, and end of a resize.	HbResizeEvent	—

hb-resizable-panel

Property	Description	Type	Default
[hbDefaultSize]	Initial size in percent. Panels without one share the remaining space equally.	number \| string	auto
[hbMin] / [hbMax]	Lower and upper size bounds in percent while dragging.	number	0 / 100
[hbCollapsible]	Allow the panel to shrink all the way to 0, ignoring hbMin.	boolean	false

hb-resizable-handle

Property	Description	Type	Default
[hbWithHandle]	Show a visible grip in the middle of the divider.	boolean	false
[hbDisabled]	Lock this divider so its two panels cannot be resized.	boolean	false