Notificación

Tarjeta de notificación en la esquina superior derecha (configurable en las cuatro esquinas) que alberga mensajes de feedback que requieren cierta permanencia: título / contenido / icono semántico / cerrable / desaparición automática / apilado. API del servicio imperativo (LhNotification.success(...)).

Uso básico

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showBasic = () => {
  LhNotification.info({ title: 'Sincronización completada', content: '3 cambios sincronizados en la nube' })
}
</script>

<template>
  <LhButton @click="showBasic">Abrir notificación</LhButton>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showBasic() {
      LhNotification.info({ title: 'Sincronización completada', content: '3 cambios sincronizados en la nube' })
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">Abrir notificación</LhButton>
</template>

Tipos semánticos

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showInfo = () => LhNotification.info({ title: 'Aviso', content: 'Contenido' })
const showSuccess = () => LhNotification.success({ title: 'Éxito', content: 'La copia de seguridad se ha completado' })
const showWarning = () => LhNotification.warning({ title: 'Advertencia', content: 'Espacio de almacenamiento insuficiente' })
const showDanger = () => LhNotification.danger({ title: 'Fallo', content: 'Conexión de red interrumpida' })
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">Información</LhButton>
    <LhButton @click="showSuccess">Éxito</LhButton>
    <LhButton @click="showWarning">Advertencia</LhButton>
    <LhButton @click="showDanger">Peligro</LhButton>
  </div>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showInfo() {
      LhNotification.info({ title: 'Aviso', content: 'Contenido' })
    },
    showSuccess() {
      LhNotification.success({ title: 'Éxito', content: 'La copia de seguridad se ha completado' })
    },
    showWarning() {
      LhNotification.warning({ title: 'Advertencia', content: 'Espacio de almacenamiento insuficiente' })
    },
    showDanger() {
      LhNotification.danger({ title: 'Fallo', content: 'Conexión de red interrumpida' })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">Información</LhButton>
    <LhButton @click="showSuccess">Éxito</LhButton>
    <LhButton @click="showWarning">Advertencia</LhButton>
    <LhButton @click="showDanger">Peligro</LhButton>
  </div>
</template>

Posición de aparición

position admite las cuatro esquinas.

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showAt = (position) => {
  LhNotification.info({ title: 'Ejemplo de posición', content: position, duration: 3000, position })
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">Superior derecha</LhButton>
    <LhButton @click="showAt('top-left')">Superior izquierda</LhButton>
    <LhButton @click="showAt('bottom-right')">Inferior derecha</LhButton>
    <LhButton @click="showAt('bottom-left')">Inferior izquierda</LhButton>
  </div>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showAt(position) {
      LhNotification.info({ title: 'Ejemplo de posición', content: position, duration: 3000, position })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">Superior derecha</LhButton>
    <LhButton @click="showAt('top-left')">Superior izquierda</LhButton>
    <LhButton @click="showAt('bottom-right')">Inferior derecha</LhButton>
    <LhButton @click="showAt('bottom-left')">Inferior izquierda</LhButton>
  </div>
</template>

Notificación cliqueable

Al pasar onClick, la tarjeta adquiere semántica de botón: puede recibir el foco con Tab y se activa con Enter / Space.

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showClickable = () => {
  LhNotification.info({
    title: 'Nueva versión disponible',
    content: 'Pulsa para ver el registro de cambios',
    duration: 0,
    onClick: () => window.open('#', '_blank'),
  })
}
</script>

<template>
  <LhButton @click="showClickable">Notificación con acción</LhButton>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showClickable() {
      LhNotification.info({
        title: 'Nueva versión disponible',
        content: 'Pulsa para ver el registro de cambios',
        duration: 0,
        onClick: () => window.open('#', '_blank'),
      })
    },
  },
}
</script>

<template>
  <LhButton @click="showClickable">Notificación con acción</LhButton>
</template>

Botón de cierre

show-close controla la visibilidad del botón de cierre (visible por defecto); close-label personaliza su nombre accesible.

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const notifyClosable = () => LhNotification.info({ title: 'Aviso', content: 'Se puede cerrar manualmente', showClose: true, closeLabel: 'Entendido, cerrar' })
const notifyNoClose = () => LhNotification.info({ title: 'Aviso', content: 'Solo queda esperar el cierre automático', showClose: false })
</script>

<template>
  <LhButton @click="notifyClosable">Mostrar botón de cierre</LhButton>
  <LhButton @click="notifyNoClose">Sin botón de cierre</LhButton>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    notifyClosable() {
      LhNotification.info({ title: 'Aviso', content: 'Se puede cerrar manualmente', showClose: true, closeLabel: 'Entendido, cerrar' })
    },
    notifyNoClose() {
      LhNotification.info({ title: 'Aviso', content: 'Solo queda esperar el cierre automático', showClose: false })
    },
  },
}
</script>

<template>
  <LhButton @click="notifyClosable">Mostrar botón de cierre</LhButton>
  <LhButton @click="notifyNoClose">Sin botón de cierre</LhButton>
</template>

API

LhNotification Props

Prop	Descripción	Tipo	Predeterminado
type	Tipo semántico	`"success" \| "warning" \| "error" \| "info" \| "danger"`	`'info'`
title	Título	`string`	—
content	Contenido	`string`	—
showClose	Si se muestra el botón de cierre	`boolean`	`true`
closeLabel	Nombre accesible del botón de cierre (si no se pasa, se toma del paquete de idioma `notification.close`)	`string`	—
onClick	Retrollamada al pulsar la tarjeta (al pasarla, la tarjeta se presenta con semántica de button)	`() => void`	—
sx	Props de maquetación rápida sx	`LhSxProps`	—

Métodos del servicio: LhNotification(options) / LhNotification.success/info/warning/danger(options), que devuelven un manejador { close }; además LhNotification.close(id), LhNotification.closeAll() y LhNotification.config({ duration, offset, appendTo }).

Eventos

Evento	Descripción	Parámetro
close	Se dispara al pulsar el botón de cierre del mensaje	—

En el uso imperativo, el cierre (tanto automático como manual) se percibe mediante la retrollamada onClose de Options.

Options

Prop	Descripción	Tipo	Predeterminado
title	Título	`string`	—
content	Contenido	`string`	—
type	Tipo semántico	`'success' \| 'warning' \| 'error' \| 'info' \| 'danger'`	`'info'`
duration	Milisegundos hasta el cierre automático; `0` significa sin cierre automático	`number`	`4500`
position	Posición de aparición	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
showClose	Si se muestra el botón de cierre	`boolean`	`true`
sx	Props de maquetación rápida sx	`LhSxProps`	—
onClick	Retrollamada al pulsar la tarjeta	`() => void`	—
onClose	Retrollamada tras el cierre	`() => void`	—

Accesibilidad

El contenedor de cada posición es role="region" + aria-live="polite": las notificaciones nuevas se anuncian de forma discreta, sin robar el foco
Las tarjetas con onClick son role="button", pueden recibir el foco con Tab y se activan con Enter / Space
El botón de cierre lleva aria-label (paquete de idioma notification.close, se puede sobrescribir con closeLabel)
El desplazamiento del apilado es una transición CSS; la animación respeta prefers-reduced-motion

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/notification/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhNotificationOptions

/** Opciones del servicio */
export interface LhNotificationOptions {
  /** Título */
  title: string
  /** Contenido */
  content?: string
  /** Tipo semántico, info por defecto */
  type?: LhNotificationType
  /** Milisegundos hasta el cierre automático; 0 significa sin cierre automático (4500 por defecto) */
  duration?: number
  /** Posición de aparición (top-right por defecto) */
  position?: LhNotificationPosition
  /** Si se muestra el botón de cierre (true por defecto) */
  showClose?: boolean
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
  /** Retrollamada al pulsar la tarjeta (al pasarla, la tarjeta puede recibir el foco y se presenta con semántica de button) */
  onClick?: () => void
  /** Retrollamada tras el cierre (tanto automático como manual) */
  onClose?: () => void
}

LhNotificationHandle

/** Manejador del servicio */
export interface LhNotificationHandle {
  close: () => void
}

LhNotificationConfig

/** Opciones de configuración global por defecto (LhNotification.config) */
export interface LhNotificationConfig {
  duration?: number
  offset?: number
  /** Contenedor de montaje (body por defecto) */
  appendTo?: string | HTMLElement
}

LhNotificationProps

/** Props del componente de notificación (renderizado internamente por el servicio; también utilizable de forma declarativa) */
export interface LhNotificationProps {
  type?: LhNotificationType
  title: string
  content?: string
  showClose?: boolean
  /** Nombre accesible del botón de cierre (si no se pasa, se toma del paquete de idioma notification.close) */
  closeLabel?: string
  /** Al pasarla, la tarjeta se puede pulsar */
  onClick?: () => void
  sx?: LhSxProps
}

LhNotificationType _{(de @lh-ui/share/core/notification)}

/** Tipo semántico de la notificación (cuatro tipos, sin loading) */
export type LhNotificationType =
  (typeof LH_TYPES_CONST)[keyof typeof LH_TYPES_CONST]

LhNotificationRecord _{(de @lh-ui/share/core/notification)}

/** Registro de una notificación en la cola del servicio */
export interface LhNotificationRecord {
  id: number
  type: LhNotificationType
  title: string
  content: string
  /** Milisegundos hasta el cierre automático; 0 significa sin cierre automático */
  duration: number
  position: LhNotificationPosition
  showClose: boolean
  sx?: LhSxProps
  onClick?: () => void
  onClose?: () => void
}

LhNotificationPosition _{(de @lh-ui/share/core/notification)}

/** Posición de aparición de la notificación (cuatro esquinas) */
export type LhNotificationPosition =
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'

Constantes

Las constantes públicas que usa este componente son las siguientes (en las columnas «Tipo / Predeterminado» de la tabla de Props puedes pulsar una entrada con el mismo nombre para saltar aquí):

LH_NOTIFICATION_POSITION_CONST _{(de @lh-ui/share/core/notification)}

/** Constante de posiciones */
export const LH_NOTIFICATION_POSITION_CONST = {
  'top-right': 'top-right',
  'top-left': 'top-left',
  'bottom-right': 'bottom-right',
  'bottom-left': 'bottom-left',
} as const

LH_NOTIFICATION_DURATION_DEFAULT _{(de @lh-ui/share/core/notification)}

/** Duración por defecto del cierre automático (las notificaciones permanecen más tiempo que los mensajes) */
export const LH_NOTIFICATION_DURATION_DEFAULT = 4500

LH_NOTIFICATION_GAP_DEFAULT _{(de @lh-ui/share/core/notification)}

/** Espaciado del apilado, en px */
export const LH_NOTIFICATION_GAP_DEFAULT = 16

Notificación ​

Uso básico ​

Tipos semánticos ​

Posición de aparición ​

Notificación cliqueable ​

Botón de cierre ​

API ​

LhNotification Props ​

Eventos ​

Options ​

Accesibilidad ​

Definiciones de tipos ​

Constantes ​