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

Статическая семантическая полоса предупреждения. Четыре типа, значки, плоский стиль и возможность закрытия.

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

<template>
  <div class="demo-col" style="max-width: 520px; gap: 12px">
    <LhAlert type="info" title="Объявление коллекции" show-icon>Цифровая версия Путешествия среди гор и ручьёв в высоком разрешении уже доступна, приглашаем полюбоваться.</LhAlert>
    <LhAlert type="success" title="Сбор завершён" show-icon closable>Оцифровка 120 картин эпохи Сун в высоком разрешении завершена и архивирована.</LhAlert>
    <LhAlert type="warning" title="Отклонение цветопередачи" show-icon plain closable>3 значения цвета отклоняются от эталона, рекомендуется перепроверить.</LhAlert>
    <LhAlert type="danger" :title="titleText" closable :close-label="closeLabel">
      Без значка, с пользовательским именем кнопки закрытия для доступности.
    </LhAlert>
    <LhAlert type="info" plain>Только текст, плоский стиль (plain), без заголовка.</LhAlert>
  </div>
</template>

<script>
export default {
  data: () => ({
    titleText: 'Отклонено при вычитке',
    closeLabel: 'Закрыть предупреждение',
  }),
}
</script>

Props

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

Slots

Слот	Описание
title	Область заголовка (по умолчанию берётся из prop title)
default	Текст описания