NotificationCenter

Uso

Coloca NotificationCenter donde se pueda acceder a la bandeja e inyecta NeuNotificationService. push devuelve un id; remove elimina un aviso, markAllRead limpia el contador y clearAll vacía la bandeja. duration se expresa en milisegundos; 0 conserva la notificación. Cada demo utiliza un servicio local para no compartir mensajes.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

{
  "unread": 0,
  "messages": []
}

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

{
  "unread": 0,
  "messages": []
}

<div class="remaining-actions">
  <button neu-button (neuClick)="show()">
    {{ t("Add message", "Añadir mensaje") }}</button
  ><button neu-button variant="outline" (neuClick)="service.clearAll()">
    {{ t("Clear all", "Limpiar todo") }}</button
  ><button neu-button variant="ghost" (neuClick)="service.markAllRead()">
    {{ t("Mark all read", "Marcar todo leído") }}
  </button>
</div>
<neu-notification-center />

this.service.push({
  "tone": "info",
  "message": "Tu informe está listo",
  "title": "Área de trabajo",
  "duration": 0
});

Estado y eventos

Coloca NotificationCenter donde se pueda acceder a la bandeja e inyecta NeuNotificationService. push devuelve un id; remove elimina un aviso, markAllRead limpia el contador y clearAll vacía la bandeja. duration se expresa en milisegundos; 0 conserva la notificación. Cada demo utiliza un servicio local para no compartir mensajes.

Accesibilidad y teclado

Tab alcanza la campana. Intro abre la bandeja; Escape cierra y devuelve el foco. Leer, limpiar y cerrar son botones normales.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Configuración pública

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuIconKey } from '@neural-ui/core/foundation';

// Declaración pública (solo referencia)
export type NeuIconKey = string;

import type { NeuIconKey } from '@neural-ui/core/foundation';
import type { NeuNotificationTone } from '@neural-ui/core/notification-center';

import type { NeuNotification } from '@neural-ui/core/notification-center';

// Declaración pública (solo referencia)
export interface NeuNotification {
  duration?: number;
  icon?: NeuIconKey;
  id: string;
  message: string;
  read: boolean;
  timestamp: Date;
  title?: string;
  tone: NeuNotificationTone;
}

import type { NeuNotification } from '@neural-ui/core/notification-center';

import type { NeuNotificationOptions } from '@neural-ui/core/notification-center';

// Declaración pública (solo referencia)
export interface NeuNotificationOptions extends Omit<NeuNotification, 'id' | 'timestamp' | 'read'> {
}

import type { NeuNotificationTone } from '@neural-ui/core/notification-center';

// Declaración pública (solo referencia)
export type NeuNotificationTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger';

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• ToastContainer