Toast

Aviso breve que no bloquea. Éxito e info se cierran solos a los 5 s; aviso, error y los que llevan acción esperan a que los cierres. Pasar el ratón o enfocarlo pausa la cuenta atrás. En esta página los de Angular salen arriba a la derecha y los de Vue abajo, para no solaparse.

Angular

Éxito

Info

Aviso

Error

Con acción

Vue

<!-- Una vez, en la plantilla raíz -->
<flt-toaster />

// En cualquier componente
private readonly toasts = inject(FltToastService);

this.toasts.show({ message: 'Transferencia enviada.', variant: 'success' });
this.toasts.show({
  message: 'Movimiento archivado.',
  action: { label: 'Deshacer', onAction: () => this.undo() },
});

<!-- Una vez, en App.vue -->
<FltToaster />

// En cualquier componente
const { show } = useToast();

show({ message: 'Transferencia enviada.', variant: 'success' });
show({
  message: 'Movimiento archivado.',
  action: { label: 'Deshacer', onAction: undo },
});

Desde un diálogo abierto

El aviso entra en la capa superior por encima del diálogo y de su fondo.

Angular

Editar alias

Guardar lanza un aviso sin cerrar el diálogo. Cerrar

Guardar

Vue

<flt-dialog title="Editar alias de la cuenta" size="sm" [(open)]="open">
  …
  <flt-button fltDialogFooter (pressed)="toasts.show({ message: 'Alias guardado.', variant: 'success' })">
    Guardar
  </flt-button>
</flt-dialog>

<FltDialog v-model:open="open" title="Editar alias de la cuenta" size="sm">
  …
  <template #footer>
    <FltButton @pressed="show({ message: 'Alias guardado.', variant: 'success' })">Guardar</FltButton>
  </template>
</FltDialog>