Componente
Alert dialog
Um modal que interrompe o fluxo para confirmar uma escolha importante. Abre a partir de um gatilho projetado, enquadra título e mensagem e devolve um resultado de OK ou Cancelar.
Básico
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HbAlertDialogComponent, HbButtonComponent } from '@herbst/ui';
@Component({
selector: 'hb-demo-alert-dialog-basic',
imports: [HbAlertDialogComponent, HbButtonComponent],
template: `
<hb-alert-dialog
hbTitle="Save this photo?"
hbDescription="Your photo of falling leaves will be added to the Herbst album."
hbOkText="Save"
>
<button hb-button hbType="outline" hbAlertDialogTrigger>Add photo</button>
</hb-alert-dialog>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoAlertDialogBasicComponent {}
Confirmação destrutiva
Conteúdo e escolha obrigatória
Posição, largura e rodapé
Ação condicionada e eventos
No action yet.
Referência de API
hb-alert-dialog — inputs
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| [hbTitle] | Título exibido no topo do diálogo. | string | '' |
| [hbDescription] | Texto de apoio abaixo do título. | string | '' |
| [hbIcon] | Nome do ícone inicial opcional no cabeçalho. | string | '' |
| [hbOkText] | Rótulo do botão de confirmação. | string | 'OK' |
| [hbCancelText] | Rótulo do botão cancelar; vazio o oculta. | string | 'Cancel' |
| [hbOkType] | Estilo visual do botão de confirmação. | 'default' | 'destructive' | 'warning' | 'success' | 'default' |
| [hbOkDisabled] | Desabilita o botão de confirmação. | boolean | false |
| [hbClosable] | Mostra o ícone de fechar e permite fechar pelo fundo. | boolean | true |
| [hbWidth] | Largura CSS do painel. | string | '32rem' |
| [hbPosition] | Ancoragem do painel na viewport. | 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center' |
| [hbFooterAlign] | Alinhamento horizontal dos botões do rodapé. | 'start' | 'center' | 'end' | 'between' | 'end' |
| [hbData] | Payload arbitrário devolvido nos eventos ok/cancel. | object | undefined | undefined |
hb-alert-dialog — outputs & slots
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| (hbOk) | Emitido com hbData quando o botão de confirmação é pressionado. | object | undefined | — |
| (hbCancel) | Emitido com hbData quando o botão cancelar é pressionado. | object | undefined | — |
| (hbOpenChange) | Emite true ao abrir e false ao fechar. | boolean | — |
| [hbAlertDialogTrigger] | Elemento projetado que abre o diálogo ao ser clicado. | slot | — |
| [hbAlertDialogContent] | Conteúdo projetado do corpo, entre o cabeçalho e o rodapé. | slot | — |