Уведомление

Уведомление сообщает читателю что-то о странице или о только что выполненном действии. Цвет выбирает сразу и иконку, и ARIA-роль: danger и warning объявляют себя как role="alert", всё, что спокойнее, — вежливый role="status".

Цвета

Обратите внимание
Доступна новая версия sitelo.
Развёрнуто
169 страниц опубликованы за 1,7 секунды.
Заметка
Острова в этом проекте отключены.
stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Обратите внимание' }, 'Доступна новая версия sitelo.'),
  alert({ color: 'success', title: 'Развёрнуто' }, '169 страниц опубликованы за 1,7 секунды.'),
  alert({ color: 'warning', title: 'Медленная страница' }, 'Одна страница рендерилась дольше 500 мс.'),
  alert({ color: 'danger', title: 'Сборка не удалась' }, 'Две внутренние ссылки ведут на несуществующие страницы.'),
  alert({ color: 'neutral', title: 'Заметка' }, 'Острова в этом проекте отключены.'),
)

Без заголовка

Однострочному уведомлению заголовок над фразой не нужен.

Сохранено.
stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Сохранено.'),
  alert({ color: 'danger' }, 'Этот адрес почты уже занят.'),
)

Варианты

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'Вариант по умолчанию — подкрашенная поверхность.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Прозрачный, с цветной рамкой.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'Полный цвет палитры — для того, что нельзя пропустить.'),
)

Иконки

У каждого цвета есть иконка по умолчанию. Передайте свою разметку в icon или icon: false, чтобы иконки не было.

Без иконки
Только текст.
Своя иконка
Подойдёт любой SVG — иконки это разметка, а не зависимость.
stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Без иконки' }, 'Только текст.'),
  alert({
    color: 'primary',
    title: 'Своя иконка',
    icon: icon('star'),
  }, 'Подойдёт любой SVG — иконки это разметка, а не зависимость.'),
)

С кнопкой закрытия

Кнопка закрытия несёт собственный обработчик:

onclick="import('/su/alert.js').then(m=>m.dismiss(this))"

Поэтому уведомление ниже действительно закрывается, хотя эта страница ничего не импортирует. Если модуль так и не придёт, кнопка отрисуется и ничего не сделает — вот почему уведомление не должно быть единственным местом, где появляется сообщение.

Закрывается
Нажмите × — обработчик подгрузит себя при первом нажатии.
alert({ color: 'primary', title: 'Закрывается', dismissible: true },
  'Нажмите × — обработчик подгрузит себя при первом нажатии.',
)

Расширенное содержимое

Уведомление принимает любых потомков, так что внутри может жить действие или список.

alert({ color: 'danger', title: 'Проверка ссылок не прошла' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Две ссылки ведут на страницы, которые не были сгенерированы:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'ссылка со страницы /docs' }),
      listItem({ title: '/blog/draft', description: 'ссылка со страницы /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Показать подробности'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Пропустить'),
    ),
  ),
)

Пропсы

ПропТипПо умолчаниюОписание
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Задаёт палитру, иконку по умолчанию и ARIA-роль.
variant'soft' | 'outline' | 'solid''soft'Насколько весомо выглядит уведомление.
titleChild—Жирная первая строка.
iconChild | false—Своя разметка иконки или false, чтобы её не было.
dismissiblebooleanfalseДобавляет кнопку закрытия, которая импортирует свой обработчик.
dismissLabelstring'Dismiss'Доступное имя этой кнопки.