Уведомление

Карточка уведомления в верхнем правом углу (доступны все четыре угла), для обратной связи, требующей задержки внимания: заголовок / основной текст / семантическая иконка / возможность закрытия / автоматическое исчезновение / стопка. Императивный сервисный API (LhNotification.success(...)).

Базовое использование

vue

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

const showBasic = () => {
  LhNotification.info({ title: 'Синхронизация завершена', content: '3 изменения синхронизированы с облаком' })
}
</script>

<template>
  <LhButton @click="showBasic">Открыть уведомление</LhButton>
</template>

vue

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

export default {
  methods: {
    showBasic() {
      LhNotification.info({ title: 'Синхронизация завершена', content: '3 изменения синхронизированы с облаком' })
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">Открыть уведомление</LhButton>
</template>

Семантические типы

vue

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

const showInfo = () => LhNotification.info({ title: 'Подсказка', content: 'Содержимое' })
const showSuccess = () => LhNotification.success({ title: 'Успех', content: 'Резервное копирование завершено' })
const showWarning = () => LhNotification.warning({ title: 'Предупреждение', content: 'Недостаточно места для хранения' })
const showDanger = () => LhNotification.danger({ title: 'Ошибка', content: 'Сетевое соединение прервано' })
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">Информация</LhButton>
    <LhButton @click="showSuccess">Успех</LhButton>
    <LhButton @click="showWarning">Предупреждение</LhButton>
    <LhButton @click="showDanger">Опасность</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showInfo() {
      LhNotification.info({ title: 'Подсказка', content: 'Содержимое' })
    },
    showSuccess() {
      LhNotification.success({ title: 'Успех', content: 'Резервное копирование завершено' })
    },
    showWarning() {
      LhNotification.warning({ title: 'Предупреждение', content: 'Недостаточно места для хранения' })
    },
    showDanger() {
      LhNotification.danger({ title: 'Ошибка', content: 'Сетевое соединение прервано' })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">Информация</LhButton>
    <LhButton @click="showSuccess">Успех</LhButton>
    <LhButton @click="showWarning">Предупреждение</LhButton>
    <LhButton @click="showDanger">Опасность</LhButton>
  </div>
</template>

Позиция появления

position поддерживает все четыре угла.

vue

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

const showAt = (position) => {
  LhNotification.info({ title: 'Пример позиции', content: position, duration: 3000, position })
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">Верхний правый</LhButton>
    <LhButton @click="showAt('top-left')">Верхний левый</LhButton>
    <LhButton @click="showAt('bottom-right')">Нижний правый</LhButton>
    <LhButton @click="showAt('bottom-left')">Нижний левый</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showAt(position) {
      LhNotification.info({ title: 'Пример позиции', content: position, duration: 3000, position })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">Верхний правый</LhButton>
    <LhButton @click="showAt('top-left')">Верхний левый</LhButton>
    <LhButton @click="showAt('bottom-right')">Нижний правый</LhButton>
    <LhButton @click="showAt('bottom-left')">Нижний левый</LhButton>
  </div>
</template>

Кликабельное уведомление

После передачи onClick карточка приобретает семантику кнопки: фокусируется через Tab, срабатывает по Enter / Space.

vue

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

const showClickable = () => {
  LhNotification.info({
    title: 'Доступна новая версия',
    content: 'Нажмите, чтобы посмотреть журнал изменений',
    duration: 0,
    onClick: () => window.open('#', '_blank'),
  })
}
</script>

<template>
  <LhButton @click="showClickable">Уведомление с действием</LhButton>
</template>

vue

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

export default {
  methods: {
    showClickable() {
      LhNotification.info({
        title: 'Доступна новая версия',
        content: 'Нажмите, чтобы посмотреть журнал изменений',
        duration: 0,
        onClick: () => window.open('#', '_blank'),
      })
    },
  },
}
</script>

<template>
  <LhButton @click="showClickable">Уведомление с действием</LhButton>
</template>

Кнопка закрытия

show-close управляет видимостью кнопки закрытия (по умолчанию отображается), close-label задаёт её доступное имя.

vue

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

const notifyClosable = () => LhNotification.info({ title: 'Подсказка', content: 'Можно закрыть вручную', showClose: true, closeLabel: 'Понятно, закрыть' })
const notifyNoClose = () => LhNotification.info({ title: 'Подсказка', content: 'Только автоматическое закрытие', showClose: false })
</script>

<template>
  <LhButton @click="notifyClosable">Показать кнопку закрытия</LhButton>
  <LhButton @click="notifyNoClose">Без кнопки закрытия</LhButton>
</template>

vue

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

export default {
  methods: {
    notifyClosable() {
      LhNotification.info({ title: 'Подсказка', content: 'Можно закрыть вручную', showClose: true, closeLabel: 'Понятно, закрыть' })
    },
    notifyNoClose() {
      LhNotification.info({ title: 'Подсказка', content: 'Только автоматическое закрытие', showClose: false })
    },
  },
}
</script>

<template>
  <LhButton @click="notifyClosable">Показать кнопку закрытия</LhButton>
  <LhButton @click="notifyNoClose">Без кнопки закрытия</LhButton>
</template>

API

LhNotification Props

Свойство	Описание	Тип	По умолчанию
type	Семантический тип	`"success" \| "warning" \| "error" \| "info" \| "danger"`	`'info'`
title	Заголовок	`string`	—
content	Основной текст	`string`	—
showClose	Показывать ли кнопку закрытия	`boolean`	`true`
closeLabel	Доступное имя кнопки закрытия (если не передано, берётся из языкового пакета `notification.close`)	`string`	—
onClick	Коллбэк нажатия на карточку (после передачи карточка представляется с семантикой button)	`() => void`	—
sx	Свойства быстрой разметки sx	`LhSxProps`	—

Сервисные методы: LhNotification(options) / LhNotification.success/info/warning/danger(options), возвращают дескриптор { close }; также есть LhNotification.close(id), LhNotification.closeAll() и LhNotification.config({ duration, offset, appendTo }).

Events

Событие	Описание	Параметры обратного вызова
close	Срабатывает при нажатии на кнопку закрытия в карточке	—

В императивном варианте закрытие (как автоматическое, так и ручное) отслеживается через коллбэк onClose в Options.

Options

Свойство	Описание	Тип	По умолчанию
title	Заголовок	`string`	—
content	Основной текст	`string`	—
type	Семантический тип	`'success' \| 'warning' \| 'error' \| 'info' \| 'danger'`	`'info'`
duration	Мс до автоматического закрытия, `0` — не закрывать	`number`	`4500`
position	Позиция появления	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
showClose	Показывать ли кнопку закрытия	`boolean`	`true`
sx	Свойства быстрой разметки sx	`LhSxProps`	—
onClick	Коллбэк нажатия на карточку	`() => void`	—
onClose	Коллбэк после закрытия	`() => void`	—

Доступность

Контейнер каждой позиции имеет role="region" + aria-live="polite": новые уведомления объявляются мягко и не перехватывают фокус
Карточки с переданным onClick получают role="button", фокусируются через Tab, срабатывают по Enter / Space
Кнопка закрытия содержит aria-label (языковой пакет notification.close, можно переопределить через closeLabel)
Смещение в стопке реализовано CSS-переходом; анимация уважает prefers-reduced-motion

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/notification/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhNotificationOptions

/** Параметры сервиса */
export interface LhNotificationOptions {
  /** Заголовок */
  title: string
  /** Основной текст */
  content?: string
  /** Семантический тип, по умолчанию info */
  type?: LhNotificationType
  /** Мс до автоматического закрытия, 0 — не закрывать (по умолчанию 4500) */
  duration?: number
  /** Позиция появления (по умолчанию top-right) */
  position?: LhNotificationPosition
  /** Показывать ли кнопку закрытия (по умолчанию true) */
  showClose?: boolean
  /** Свойства быстрой разметки sx */
  sx?: LhSxProps
  /** Коллбэк нажатия на карточку (после передачи карточка фокусируется и представляется с семантикой button) */
  onClick?: () => void
  /** Коллбэк после закрытия (как автоматического, так и ручного) */
  onClose?: () => void
}

LhNotificationHandle

/** Дескриптор сервиса */
export interface LhNotificationHandle {
  close: () => void
}

LhNotificationConfig

/** Параметры глобальных значений по умолчанию (LhNotification.config) */
export interface LhNotificationConfig {
  duration?: number
  offset?: number
  /** Контейнер монтирования (по умолчанию body) */
  appendTo?: string | HTMLElement
}

LhNotificationProps

/** Props компонента карточки (рендерится внутри сервиса; можно использовать и декларативно) */
export interface LhNotificationProps {
  type?: LhNotificationType
  title: string
  content?: string
  showClose?: boolean
  /** Доступное имя кнопки закрытия (если не передано, берётся из языкового пакета notification.close) */
  closeLabel?: string
  /** После передачи карточка становится кликабельной */
  onClick?: () => void
  sx?: LhSxProps
}

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

/** Семантический тип уведомления (четыре семантики, без loading) */
export type LhNotificationType =
  (typeof LH_TYPES_CONST)[keyof typeof LH_TYPES_CONST]

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

/** Форма записи отдельного уведомления в очереди сервиса */
export interface LhNotificationRecord {
  id: number
  type: LhNotificationType
  title: string
  content: string
  /** Мс до автоматического закрытия, 0 — не закрывать */
  duration: number
  position: LhNotificationPosition
  showClose: boolean
  sx?: LhSxProps
  onClick?: () => void
  onClose?: () => void
}

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

/** Позиция появления уведомления (четыре угла) */
export type LhNotificationPosition =
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'

Константы

Публичные константы, используемые этим компонентом (в столбцах «Тип / По умолчанию» таблицы Props можно перейти к одноимённой записи):

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

/** Константа позиций */
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 _{(из @lh-ui/share/core/notification)}

/** Длительность автоматического закрытия по умолчанию (уведомления показываются дольше, чем сообщения) */
export const LH_NOTIFICATION_DURATION_DEFAULT = 4500

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

/** Интервал между карточками в стопке, px */
export const LH_NOTIFICATION_GAP_DEFAULT = 16

Уведомление ​

Базовое использование ​

Семантические типы ​

Позиция появления ​

Кликабельное уведомление ​

Кнопка закрытия ​

API ​

LhNotification Props ​

Events ​

Options ​

Доступность ​

Определения типов ​

Константы ​