Главная / Каталог / UI-компоненты
«Уведомления» — 5 блоков обратной связи
Цена: бесплатно для подписчиков Telegram-канала
Бесплатный набор: тосты с автозакрытием и кнопкой «Отменить», инлайн-сообщения, баннеры с памятью о закрытии, пустые состояния и статусы.
Набор закрывает всё, чем интерфейс разговаривает с человеком: всплывающее уведомление, сообщение в форме, баннер над шапкой, пустой экран и плашка статуса. Чистый CSS и ванильный JS, все классы с префиксом pra- — можно вставить в готовый проект, не боясь, что что-то перебьётся.
В тостах доделаны две вещи, которых обычно не хватает. Полоса внизу показывает, сколько осталось до закрытия: без неё исчезновение выглядит как сбой, и человек не понимает, успел он прочитать или нет. А при наведении мыши отсчёт замирает — иначе тост с кнопкой «Отменить» успевает исчезнуть раньше, чем до кнопки дотянутся. Полоса двигается CSS-переходом, а не таймером по кадрам, поэтому не дёргается, когда вкладка уходит в фон.
Баннеры помнят закрытие в localStorage, причём обращения к нему обёрнуты в try/catch: в приватном окне он бросает исключение и без обёртки уронил бы всю страницу. У баннера с куками намеренно нет крестика — отказ от необязательных cookie должен быть кнопкой, а закрыть крестиком не значит ни согласиться, ни отказаться.
Что умеет
- Тосты четырёх типов со стеком и автозакрытием
- Полоса обратного отсчёта и пауза при наведении
- Кнопка «Отменить» прямо в тосте
- Инлайн-сообщения, в том числе вариант без заливки
- Баннеры с памятью о закрытии и честным cookie-блоком
- Три пустых состояния с SVG-иллюстрациями
- Статусы с пульсирующей точкой для «прямо сейчас»
- role=status и aria-live, уважение prefers-reduced-motion
Разделы
- Тосты
- Инлайн-сообщения
- Баннеры
- Пустые состояния
- Статусы