ДокументацияРазделы, компоненты, системы и их подразделы
Toast
Неблокирующее уведомление
Transient feedback
Toast подтверждает результат и не останавливает работу
Используйте уведомление после сохранения, создания или короткой фоновой операции. Критическая проблема, обязательное решение и подробная ошибка требуют Alert, Banner или Modal.
Четыре смысловых типа
Иконка, label и текст дублируют цвет. Error подходит только для короткого результата; объяснение причины остаётся в постоянном контексте.
Изменения сохраненыНовая версия уже доступна команде.
Данные обновленыСписок синхронизирован несколько секунд назад.
Автосохранение отключеноПроверьте подключение к сети.
Не удалось загрузить файлПовторите попытку или выберите другой файл.
.ox-toast-type-success.ox-toast-type-info.ox-toast-type-warning.ox-toast-type-errorПрограммный запуск
Нажмите тип уведомления. Динамический Toast появится справа снизу, остановит таймер при наведении и удалится после скрытия.
JavaScriptПоказать Toast
Toast.run(
['Изменения сохранены', 'Новая версия доступна команде.'],
{
static: false,
type: 'success',
placement: 'bottom right',
delay: 3200,
enableButtonClose: true,
},
(toast) => toast.element.setAttribute('role', 'status'),
);Параметры поведения
Для создаваемого через run одноразового уведомления используйте static: false. Статические экземпляры остаются в DOM после скрытия и подходят для повторного показа.
typesuccess, info, warning, error или null.placementtop/bottom + left/center/right; по умолчанию bottom center.autohide: trueАвтоматически скрывает уведомление.delay: 3000Время показа в миллисекундах; на hover таймер приостанавливается.size: 'md'sm, md или lg.theme: 'dark'dark по умолчанию или light.enableClickToast: trueКлик по поверхности закрывает Toast.enableButtonClose: falseДобавляет отдельную кнопку закрытия при true.keyboard: trueEscape закрывает открытые уведомления.stack.max: 5Скрывает самые старые элементы сверх лимита.animation.effectfade, zoom, blur, slide-up, slide-down или none.animation.duration: 220Длительность появления и скрытия.
API, события и доступность
Toast не должен забирать фокус. Спокойный результат объявляйте через status, срочную короткую ошибку — через alert.
JavaScriptУправление экземпляром
import { Toast } from 'okaux/js/app.js';
const toast = Toast.run('Скопировано', {
static: false,
type: 'success',
size: 'sm',
delay: 1800,
});
toast.hide();toast:showПеред показом; событие можно отменить.toast:shownПосле появления.toast:hideПеред скрытием; событие можно отменить.toast:hiddenПосле скрытия или удаления.role="status"Обычное подтверждение результата.role="alert"Только срочная короткая ошибка.Одно действиеДля Undo оставляйте одну понятную кнопку и достаточно времени.Не переносить фокусПользователь продолжает исходную задачу.