ДокументацияРазделы, компоненты, системы и их подразделы
Feedback и Alerts
Alert и системные сообщения
Feedback
Feedback сообщает о важном результате или состоянии
Alert относится к текущей задаче или блоку, Banner — ко всей странице или разделу. Для короткого автоматически исчезающего подтверждения используйте Toast.
Четыре смысловых типа
Тип выбирают по смыслу сообщения, а не ради цвета. Заголовок и текст должны объяснять, что произошло и требуется ли действие.
Информация
Отчёт обновится после следующей синхронизации.
Готово
Настройки проекта сохранены.
Нужна проверка
У двух участников не назначена роль.
Не удалось сохранить
Проверьте соединение и повторите попытку.
.ox-alert-type-info
.ox-alert-type-success
.ox-alert-type-warning
.ox-alert-type-error
Размер отражает объём и приоритет
Compact подходит для плотных интерфейсов, базовый размер — для большинства сообщений, Large — для заметного блока с пояснением или действиями.
Compact
Короткое сообщение внутри плотного контекста.
Default
Основной размер для системного сообщения.
Large
Заметное сообщение с дополнительным контекстом.
.is-compactбазовый размер.is-largeBanner для уровня страницы
Banner остаётся видимым, пока информация актуальна. Действия должны быть короткими и напрямую связанными с сообщением.
HTMLBanner с действием
<div class="ox-banner ox-banner-type-warning is-open" data-ox-ui="feedback">
<div class="ox-feedback__layout">
<span class="ox-feedback__icon" aria-hidden="true">!</span>
<div class="ox-feedback__content">
<h3 class="ox-feedback__title">Обновите платёжные данные</h3>
<p class="ox-feedback__description">Доступ команды скоро закончится.</p>
<div class="ox-feedback__actions">...</div>
</div>
</div>
</div>Закрытие и повторный показ
Добавляйте закрытие только для некритичного сообщения. Пустая кнопка получает системную иконку автоматически, а связанный триггер может снова показать блок.
Изменения опубликованы
Новая версия уже доступна участникам.
HTMLDismiss и повторный показ
<button data-ox-toggle="feedback" data-ox-target="#save-result">
Показать сообщение
</button>
<div
class="ox-alert ox-alert-type-success is-open"
id="save-result"
data-ox-ui="feedback"
data-ox-duration="220"
role="status"
>
<div class="ox-feedback__layout">
<div class="ox-feedback__content">...</div>
<button
class="ox-feedback__close"
type="button"
data-ox-dismiss="feedback"
aria-label="Закрыть сообщение"
></button>
</div>
</div>API, события и доступность
Feedback поддерживает show, hide и toggle. События до изменения состояния можно отменить.
JavaScriptУправление Feedback
import { Feedback } from 'okaux/js/app.js';
const element = document.querySelector('[data-ox-ui="feedback"]');
const feedback = Feedback.getOrCreateInstance({ element });
feedback.show();
feedback.hide();
feedback.toggle();data-ox-duration="220"Длительность анимации в миллисекундах; 220 — значение по умолчанию.feedback:showПеред показом; событие можно отменить.feedback:shownПосле завершения показа.feedback:hideПеред скрытием; событие можно отменить.feedback:hiddenПосле завершения скрытия.role="status"Для спокойного информационного сообщения или результата операции.role="alert"Только для срочной ошибки, требующей немедленного внимания.aria-labelКнопка без видимого текста должна иметь понятное имя действия.Не только цветТип сообщения всегда дублируется заголовком, текстом или понятной иконкой.Критичное сообщениеНе скрывайте автоматически и не добавляйте dismiss, пока проблема не решена.