Уведомление

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

Разметку строит кит: тост заводится вызовом, а не написанным вручную узлом. Если стандартной не хватает, соберите свой и положите в .inst-toasts сами.

Когда использовать

Поведение

Почему popover

Область объявлена popover, потому что z-index не решает задачу целиком. Тост обязан быть виден поверх всего, что нарисовало приложение: панели с overflow: hidden, липкой шапки, открытого поповера. Верхний слой даёт это по построению, а число в z-index — только до первого чужого числа побольше.

Отсюда же в ките нет отдельного z-индекса для тостов: применить его было бы некуда.

Модалка выше тоста

Тост не перекрывает открытую модалку. Проверено замером: область, переоткрытая после showModal() — и в той же задаче, и через задачу, — остаётся под диалогом. Верхний слой упорядочен по времени входа, но модальный диалог держится выше манипуляций с popover.

Что делать вместо:

Так даже правильнее: сообщение о результате действия, запущенного в диалоге, и должно приходить туда, куда смотрит человек.

Почему область открыта всегда

popover="manual" открывается один раз при инициализации и не закрывается.

Закрытый popover — это display: none, а живой регион в display: none не озвучивается: скринридер не сообщил бы ни одного уведомления. Пустая открытая область невидима и ничего не перехватывает — pointer-events возвращаются только самим тостам.

Пауза и потолок очереди

Таймер замирает под курсором и на фокусе. Уведомление, исчезнувшее тогда, когда его начали читать, — это потерянное сообщение, и WCAG 2.2.1 требует этого: у времени должна быть пауза.

Больше четырёх одновременно не показывается — двадцать уведомлений подряд читаются как стена. Самые старые уходят, чтобы новое было видно.

JS

Тост не пишут разметкой — его зовут. Поэтому пример здесь один и он живой: нажмите, и уведомление придёт в правый нижний угол экрана.

<button class="inst-btn inst-btn--primary" type="button"
        data-demo-toast='{"tone":"ok","title":"Прогон поставлен в очередь","text":"worldbox-1 · седьмой в очереди"}'>Успех</button>
<button class="inst-btn" type="button"
        data-demo-toast='{"tone":"error","title":"Не удалось отправить","duration":0}'>Ошибка, которая не уходит</button>
<button class="inst-btn" type="button"
        data-demo-toast='{"tone":"running","title":"Идёт сборка","text":"Осталось два шага"}'>Идёт</button>

import { toast } from './src/kit.js';

toast({ tone: 'ok', title: 'Прогон поставлен в очередь',
        text: 'worldbox-1 · седьмой в очереди' });

Без скрипта тостов нет вовсе: очередь, таймер и пауза под курсором — работа, которую CSS не выполняет. Вид, появление и уход при этом целиком на CSS.

Методы

Опции

toast({ tone: 'error', title: 'Не удалось отправить', duration: 0 });

toast({ title: 'Задача удалена',
        action: { label: 'Вернуть', onClick: () => restore() } });

События

Своих нет. Действие приходит колбэком action.onClick.

Правила

Доступность

API

Связанное

Баннер Сноска Блок отказа Модалка Поведение