Componente

Popover

Um painel flutuante ancorado a um gatilho. Abra por clique ou hover, posicione-o em qualquer lado e alinhamento, defina sua largura, gerencie o foco, controle o fechamento, e conduza-o como um overlay controlado.

Gatilho, cabeçalho e formulário

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

import { HbButtonComponent, HbInputDirective, HbPopoverImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-popover-basic',
  imports: [HbPopoverImports, HbButtonComponent, HbInputDirective],
  template: `
    <hb-popover>
      <button hbPopoverTrigger hb-button hbType="outline">Rename photo</button>

      <hb-popover-content [hbWidth]="288">
        <hb-popover-header>
          <h4 hb-popover-title>Rename photo</h4>
          <p hb-popover-description>Update the display name for this photo.</p>
        </hb-popover-header>

        <div class="mt-3 flex items-center gap-2">
          <input hb-input hbFluid value="Oak leaves" />
          <button hb-button hbSize="sm" hbPopoverClose>Save</button>
        </div>
      </hb-popover-content>
    </hb-popover>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoPopoverBasicComponent {}

Lado, alinhamento, offset e largura

Hover, controlado e fechamento

Referência de API

hb-popover — opening

Propriedade	Descrição	Tipo	Padrão
[hbTrigger]	Abre no clique ou no hover.	'click' \| 'hover'	'click'
[hbSide] / [hbAlign] / [hbSideOffset]	Lado preferido, alinhamento ao longo dele, e o espaço em pixels. Inverte para o lado oposto se faltar espaço.	side / align / number	'bottom' / 'center' / 4
[hbOpenDelay] / [hbCloseDelay]	Atrasos de hover em milissegundos antes de abrir e antes de fechar.	number	100 / 150
[hbOpen] / (hbOpenChange)	Estado aberto controlado (undefined para não controlado), e um evento ao abrir e fechar.	boolean \| undefined / boolean	undefined / —
[hbDisabled]	Impede o popover de abrir.	boolean	false

hb-popover — focus & dismissal

Propriedade	Descrição	Tipo	Padrão
[hbAutoFocus] / [hbRestoreFocus]	Foca o primeiro elemento focável ao abrir, e devolve o foco ao gatilho ao fechar.	boolean	true
[hbCloseOnEscape] / [hbCloseOnOutsideClick]	Fecha na tecla Escape, e ao clicar fora do painel.	boolean	true

Trigger & content

Propriedade	Descrição	Tipo	Padrão
[hbPopoverTrigger]	Marca o elemento projetado que abre o popover.	directive	—
hb-popover-content [hbWidth]	O corpo do painel. hbWidth é um número (px) ou qualquer comprimento CSS; null para automático.	number \| string \| null	null
hb-popover-header / -title / -description	Partes estruturadas de cabeçalho para um título e texto de apoio.	component	—
[hbPopoverClose]	Qualquer elemento dentro do painel que fecha o popover ao ser clicado.	directive	—