Message (сообщение)

Лёгкая обратная связь в глобальном всплывающем слое: успех / неудача операции, состояние сети и т. п. Монтируется в одноэлементный контейнер; несколько сообщений складываются сверху вниз.

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

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

import { message } from '@lh-ui/react'
import '@lh-ui/react/style/message'

message.success('Сохранено успешно')

Методы message

Метод	Описание	Возвращаемое значение
info / success / warning / error / danger	Показать сообщение	{ close }
loading	Показать сообщение о загрузке (по умолчанию не закрывается автоматически)	{ close }
destroyAll	Закрыть все сообщения и размонтировать контейнер	void

Возвращаемый дескриптор используется для явного закрытия:

const handle = message.loading('Загрузка…', { duration: 0 })
// ...
handle.close()

LhMessageOptions

Проп	Описание	Тип	По умолчанию
duration	Миллисекунды до автоматического закрытия; 0 — не закрывать автоматически (для варианта loading по умолчанию 0)	number	3000
showClose	Показывать ли кнопку закрытия	boolean	false
offset	Отступ от верхней края области просмотра, px	number	20
closeLabel	aria-label кнопки закрытия	string	Из языкового пакета (zh-CN: 关闭提示)
onClose	Обратный вызов при закрытии	() => void	—
sx	Сокращение для макета	SxProps	—

Соответствие событий версии Vue

message.success('x') соответствует LhMessage.success('x') из plus; метод дескриптора close() соответствует LhMessage.close(id) из plus. В React управление ведётся через возвращаемое значение, а не через глобальный id.

Доступность

Успех / информация — role="status" (объявление в очереди), ошибка / предупреждение — role="alert" (немедленное объявление); та же парадигма, что у Предупреждение и Уведомление.

Стили

import '@lh-ui/react/style/message'