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

PropriedadeDescriçãoTipoPadrã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

PropriedadeDescriçãoTipoPadrã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