Componente

Resizable

Painéis divididos arrastáveis. Disponha os painéis horizontal ou verticalmente, arraste ou use o teclado nos handles entre eles, defina tamanhos padrão e limites min/max, permita que painéis colapsem, e leia os tamanhos conforme mudam.

Dois painéis

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 e handle com grip

Header

Body — drag the grip ↕

Limites, colapso e eventos

Files

Editor

Preview

sizes: 25, 50, 25

Referência de API

hb-resizable-group

Propriedade	Descrição	Tipo	Padrão
[hbOrientation]	Divide os painéis lado a lado ou empilhados. O grupo precisa de largura ou altura fixa.	'horizontal' \| 'vertical'	'horizontal'
[hbKeyboardStep]	Percentual movido por tecla de seta num handle focado (Home/End vão ao mín/máx).	number	5
(hbResizeStart) / (hbResize) / (hbResizeEnd)	Emitem um evento { sizes, orientation } no início, durante e no fim de um redimensionamento.	HbResizeEvent	—

hb-resizable-panel

Propriedade	Descrição	Tipo	Padrão
[hbDefaultSize]	Tamanho inicial em percentual. Painéis sem ele dividem o espaço restante igualmente.	number \| string	auto
[hbMin] / [hbMax]	Limites inferior e superior de tamanho em percentual ao arrastar.	number	0 / 100
[hbCollapsible]	Permite o painel encolher até 0, ignorando hbMin.	boolean	false

hb-resizable-handle

Propriedade	Descrição	Tipo	Padrão
[hbWithHandle]	Mostra um grip visível no meio do divisor.	boolean	false
[hbDisabled]	Trava este divisor para que seus dois painéis não sejam redimensionados.	boolean	false