Предупреждение

Используется для отображения важных предупреждающих сообщений на странице.

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

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

Информация

Это информационное сообщение.

Успех

Это сообщение об успехе.

Предупреждение

Это предупреждение (простой стиль).

Это сообщение об ошибке (без заголовка).

С внешним состоянием

Закрытие внутренне неуправляемое: нажатие на кнопку закрытия размонтирует элемент. Чтобы открыть снова, оберните его условным рендерингом.

import { LhAlert } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhAlert type="success" title="Успех" showIcon closable>
      Это сообщение об успешном выполнении.
    </LhAlert>
  )
}

Props компонента Alert

Проп	Описание	Тип	Допустимые значения	По умолчанию
type	Тип	'info' | 'success' | 'warning' | 'danger'	—	'info'
title	Заголовок (при отсутствии строка заголовка не выводится)	ReactNode	—	—
closable	Можно ли закрыть	boolean	—	false
showIcon	Показывать ли значок типа	boolean	—	false
plain	Обычное оформление (светлая рамка)	boolean	—	false
closeLabel	Имя кнопки закрытия для доступности (если не задано, берётся из языкового пакета alert.close)	string	—	'关闭警告'
sx	Сокращение для макета	SxProps	—	—

События Alert

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onClose	Срабатывает при нажатии на кнопку закрытия	(event: MouseEvent) => void	@close

Закрытие — внутреннее неконтролируемое состояние

После нажатия на кнопку закрытия Alert размонтируется напрямую (без анимации перехода) и вызывает onClose. Чтобы иметь возможность открыть его снова, оберните его в условный рендеринг, управляемый внешним состоянием, а не полагайтесь на внутреннее состояние компонента.

Доступность: live region

При type, равном warning / danger, выводится role="alert" (немедленное объявление); info / success выводят role="status" (объявление в очереди), чтобы не прерывать текущее действие пользователя.

Стили

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