Уведомление
Более весомая обратная связь, чем Message: с заголовком / основным текстом / значком типа, появляется из четырёх углов; подходит для системных уведомлений с длинным содержимым.
Базовое использование
Базовое использование
import { notification } from '@lh-ui/react'
import '@lh-ui/react/style/notification'
notification.success({ title: 'Сохранено успешно', content: 'Произведение опубликовано в галерее.' })
// Строковая краткая форма: выводится только строка заголовка
notification.info('Системное уведомление')
Методы notification
| Метод | Описание | Возвращаемое значение |
|---|---|---|
| info / success / warning / error / danger | Показать уведомление | { close } |
| close | Закрыть указанное уведомление (с предварительной анимацией ухода) | void |
| closeAll | Закрыть все уведомления и размонтировать контейнер | void |
const handle = notification.warning({ title: 'Недостаточно места для хранения' })
handle.close()
LhNotificationOptions
| Проп | Описание | Тип | По умолчанию |
|---|---|---|---|
| title | Заголовок (при отсутствии берётся content) | string | — |
| content | Основной текст (при совпадении с title выводится только строка заголовка) | string | — |
| duration | Миллисекунды до автоматического закрытия; 0 — не закрывать автоматически | number | 4500 |
| position | Позиция появления | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-right' |
| showClose | Показывать ли кнопку закрытия | boolean | true |
| closeLabel | aria-label кнопки закрытия | string | Из языкового пакета (zh-CN: 关闭通知) |
| onClick | Обратный вызов при нажатии (если задан, карточка становится кликабельной) | () => void | — |
| onClose | Обратный вызов при закрытии | () => void | — |
| sx | Сокращение для макета | SxProps | — |
Анимация ухода
В React нет transition-group, поэтому уход элемента управляется им самим: при закрытии сначала проигрывается
lh-notification-slide-leave-* (280 мс), затем запись удаляется. FLIP-анимация смещения не реализована:
при добавлении и удалении элементов очереди соседние карточки перемещаются мгновенно,
а интервал между ними обеспечивает flex gap контейнера.
Доступность
warning / danger — role="alert" (немедленное объявление), info / success —
role="status" (объявление в очереди); контейнер имеет role="region" + aria-live="polite".
Стили
import '@lh-ui/react/style/notification'