Alert

<sf-alert> показывает сообщение, которое остаётся на странице, пока его не закроют: предупреждение перед действием, ошибку формы, итог проверки. Элемент строится на классах компонента Уведомления. Для короткого результата поверх интерфейса, который исчезает сам, берите Toast.

Пример

<div class="flex flex-col gap-3">
  <sf-alert status="warning" title="Письмо не доставлено" supporting-text="Проверьте адрес получателя и отправьте письмо ещё раз." action-text="Изменить адрес" action="edit-address" closable close-label="Закрыть сообщение"></sf-alert>
  <sf-alert status="success" appearance="outlined" title="Изменения сохранены" supporting-text="Новая версия доступна участникам проекта."></sf-alert>
</div>

Применение

Статус и вид

status выбирает смысл из общего словаря: neutral, info, success, warning, error. Выбирайте его по смыслу сообщения, а не ради цвета. Статус ставит подходящую иконку; icon заменяет её другой, icon="none" убирает. appearance задаёт, чем сообщение отделено от окружения: default — заливкой и границей, outlined — только границей, flat — только заливкой, когда границы задаёт окружающий контейнер.

Текст

title — короткая суть сообщения, supporting-text — пояснение обычным размером текста. Слоты title и supporting-text принимают разметку, например ссылку на раздел помощи.

Действия

action-text показывает основную кнопку, secondary-action-text — второстепенную. action и secondary-action — машинные значения кнопок (по умолчанию action и secondary). Нажатие отправляет всплывающее событие sf-alert-action; в event.detail.action — значение кнопки, в event.detail.alert — сам элемент. Действие выполняет приложение.

Закрытие

closable добавляет кнопку закрытия. Нажатие отправляет sf-alert-close и убирает элемент со страницы после анимации выхода; при системной настройке уменьшения движения — сразу. close() закрывает сообщение из скрипта.

const alert = document.querySelector('sf-alert');
alert.onAction((action) => {
  if (action === 'edit-address') openAddressForm();
});
alert.onClose(() => saveDismissed('delivery-warning'));

onAction(handler) передаёт обработчику значение действия, detail и само событие; onClose(handler) — detail и событие.

Создание из скрипта

const alert = await SF.createAsync('alert', {
  status: 'error',
  title: 'Не удалось сохранить',
  supportingText: 'Проверьте соединение и повторите попытку.',
  role: 'alert',
});
form.prepend(alert);

Доступность

• Сообщение, которое есть на странице с первой загрузки, — обычный текст: живая роль ему не нужна. Сообщению, которое вставляется после действия, задайте role="status", а срочной ошибке — role="alert", чтобы экранный диктор его объявил.
• Иконка декоративна: смысл несёт текст. Начинайте title со слов, а не полагайтесь на цвет статуса.
• Кнопки действий и закрытия — нативные кнопки в обычном порядке Tab. Кнопка закрытия называется «Закрыть сообщение» на русской странице и «Close alert» на остальных; close-label задаёт своё имя.
• Если фокус был внутри закрытого сообщения, верните его на понятное место — например, на поле, к которому относилось сообщение. Компонент фокус не переносит.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• template — string, по умолчанию default.
• status — string, по умолчанию neutral, значения: neutral, info, success, warning, error. О чём сообщает уведомление, в общем словаре статусов. Также принимаются значения clear и danger; они означают neutral и error.
• appearance — string, по умолчанию default, значения: default, outlined, flat. Вид уведомления: заливка, контур или плоский.
• icon — string, по умолчанию пусто. Необязательное переопределение иконки. Используйте none, чтобы скрыть семантическую иконку.
• title — string, по умолчанию пусто. Короткий заголовок сообщения.
• supporting-text — string, по умолчанию пусто. Дополнительный основной текст обычного размера.
• action-text — string, по умолчанию пусто. Видимая подпись основного необязательного действия.
• action — string, по умолчанию action. Стабильное значение действия, передаваемое в sf-alert-action.
• secondary-action-text — string, по умолчанию пусто. Видимая подпись вторичного необязательного действия.
• secondary-action — string, по умолчанию secondary. Стабильное значение вторичного действия, передаваемое в sf-alert-action.
• closable — boolean, по умолчанию false. Отображает явно названное действие закрытия.
• close-label — string, по умолчанию пусто. Доступное имя действия закрытия на языке страницы. Пусто — текст на языке страницы (по-английски «Close alert»).
• root-class — string, по умолчанию пусто.

Прежние имена:

Методы

• close() — возвращает object. Псевдоним dismiss(): отправляет sf-alert-close и удаляет уведомление после анимации исчезновения. Возвращает элемент.
• onAction(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик sf-alert-action; обработчик получает (action, detail, event). Возвращает элемент.
• onClose(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик sf-alert-close; обработчик получает (detail, event). Возвращает элемент.
• dismiss() — возвращает object. Отправляет sf-alert-close, затем удаляет уведомление из DOM после анимации исчезновения (сразу при уменьшенном движении). Возвращает элемент.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

• sf-alert-action — detail: { action?: string, alert?: any }. Активирована кнопка действия ([data-action] или [data-alert-action]) внутри уведомления. Всплывает и с composed: true; не отменяемое. Уведомление остаётся.
• sf-alert-close — detail: { alert?: any }. Уведомление закрывается кнопкой закрытия или через dismiss()/close(). Всплывает и с composed: true; не отменяемое; после него элемент удаляется.

Доступность

• Доступное имя: внутренний.
• Клавиши: Tab.
• Фокус: Действия используют нативное поведение focus-visible; после закрытия приложение возвращает фокус, только если он был внутри удалённого уведомления.

Минимальная разметка

<sf-alert status="info" title="Update available" supporting-text="Save your changes before refreshing."></sf-alert>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/alert
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-alert

См. также

• Уведомления — сообщения на классах.
• Toast — временное сообщение поверх интерфейса.