Всплывающие сообщения
Настраивайте всплывающие сообщения для предупреждающих уведомлений посетителей.
Всплывающие сообщения (Toasts) - это легкие уведомления, разработанные для имитации push-уведомлений, которые были популярны в мобильных и настольных операционных системах. Они построены с flexbox, поэтому их легко выровнять и расположить.
Обзор
Что нужно знать при использовании:
- Всплывающие сообщения включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
- Всплывающие сообщения будут автоматически скрываться, если вы не укажете
autohide: false
.
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion
. Смотрите раздел по ограничении анимации в нашей документации.
Примеры
Основной
Чтобы поощрить растяжимые и предсказуемые всплывающие сообщения, мы рекомендуем помещать их в заголовок и тело. В заголовках Всплывающие сообщения используется display: flex
что позволяет легко выравнивать содержимое благодаря нашим утилитам margin и flexbox.
Всплывающие сообщения можно гибко настраивать под ваши потребности с минимальными настройками. Как минимум необходимо чтобы один «элемент» содержал ваш контент и настоятельно рекомендуем использовать кнопку закрытия.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 мин. назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Привет мир! Это тост-сообщение.
</div>
</div>
Live
Нажмите кнопку ниже, чтобы отобразить тост (расположенный с нашими утилитами в правом нижнем углу), который по умолчанию был скрыт с помощью .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Показать лайв тосты</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 мин назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Привет, мир! Это тост-сообщение.
</div>
</div>
</div>
Полупрозрачность
Всплывающие сообщения также немного полупрозрачные. Для браузеров, поддерживающих CSS свойство фонового фильтра backdrop-filter
, будут размыты элементы под всплывающим сообщением.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 мин. назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Привет мир! Это тост-сообщение.
</div>
</div>
Стек
Если у вас есть несколько всплывающих сообщений, они по умолчанию размещаются вертикально друг под другом в удобочитаемой форме.
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">прямо сейчас</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Видите? Именно так.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 секунды назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Внимание, всплывающие сообщения складываются автоматически
</div>
</div>
</div>
Пользовательский контент
Настройте свои тосты, удалив субкомпоненты, настроив с помощью утилит или добавив собственную разметку. Здесь мы создали более простой тост, удалив по умолчанию .toast-header
, добавив собственную иконку скрытия из Иконок Bootstrap, и используя некоторые утилиты flexbox, чтобы настроить макет.
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Привет, мир! Это тост-сообщение.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
</div>
Кроме того, Вы также можете добавить в тосты дополнительные элементы управления и компоненты.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Привет мир! Это тост-сообщение.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Действовать</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Закрыть</button>
</div>
</div>
</div>
Цветовые схемы
Основываясь на приведенном выше примере, вы можете создавать различные цветовые схемы всплывающих окон с помощью наших утилит цвета. Здесь мы добавили .bg-primary
и .text-white
в .toast
, а затем добавили .btn-close-white
к нашей кнопке закрытия. Для получения четких краев мы удаляем границу по умолчанию с помощью .border-0
.
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Привет, мир! Это тост-сообщение.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
</div>
Размещение
Размещайте всплывающие сообщения с помощью пользовательских параметров CSS по мере необходимости. Верхний правый угол часто используется для уведомлений, как и верхний средний. Если вы собираетесь показывать только одно сообщение за раз, поместите стили позиционирования прямо на .toast
.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Размещение тостов</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Выберите позицию...</option>
<option value="top-0 start-0">Верх слева</option>
<option value="top-0 start-50 translate-middle-x">Верх по центру</option>
<option value="top-0 end-0">Верх справа</option>
<option value="top-50 start-0 translate-middle-y">Середина слева</option>
<option value="top-50 start-50 translate-middle">Середина по центру</option>
<option value="top-50 end-0 translate-middle-y">Середина справа</option>
<option value="bottom-0 start-0">Низ слева</option>
<option value="bottom-0 start-50 translate-middle-x">Низ по центру</option>
<option value="bottom-0 end-0">Низ справа</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 мин назад</small>
</div>
<div class="toast-body">
Привет мир! Это тост-сообщение.
</div>
</div>
</div>
</div>
Для систем, которые генерируют больше уведомлений, рассмотрите возможность использования элемента обтекания, чтобы они могли легко складываться.
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Позиционируйте его: -->
<!-- - `.toast-container` для промежутка между тостами -->
<!-- - `.position-absolute`, `top-0` & `end-0` чтобы тосты располагались в правом верхнем углу -->
<!-- - `.p-3` чтобы тосты не прилипали к краю контейнера -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Затем положите тосты внутрь -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Видно? Именно так.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 секунды назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Внимание, тосты складываются автоматически
</div>
</div>
</div>
</div>
Вы также можете использовать утилиты flexbox для выравнивания тостов по горизонтали и/или вертикали.
<!-- Контейнер Flexbox для выравнивания тостов -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Затем положите тосты внутрь -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 мин назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Привет мир! Это тост-сообщение.
</div>
</div>
</div>
Доступность
Всплывающие сообщения предназначены для небольших перерывов в работе ваших посетителей или пользователей, поэтому, чтобы помочь тем, у кого есть программы чтения с экрана и аналогичные вспомогательные технологии, вы должны обернуть свои сообщения aria-live
своего региона. Читатели экрана автоматически объявляют об изменениях в живых регионах (таких как добавление / обновление компонента-тоста) без необходимости перемещать фокус пользователя или иным образом прерывать его. Кроме того, включите aria-atomic="true"
, чтобы гарантировать, что весь тост всегда объявляется как единое (атомарное) устройство, вместо того, чтобы объявлять, что было изменено (что может привести к проблемам, если вы обновляете только часть содержимого тоста, или если отображение того же содержимого тоста в более поздний момент времени). Если необходимая информация важна для процесса, например, для списка ошибок в форме, затем используйте компонент уведомления вместо всплывающего сообщения.
Обратите внимание, что регион должен присутствовать в разметке, прежде чем всплывающее сообщение будет создано или обновлено. Если вы динамически генерируете и то и другое одновременно и вставляете их на страницу, они, как правило, не будут анонсированы вспомогательными технологиями.
Вы также должны адаптировать>role и aria-live
в зависимости от контента. Если это важное сообщение, такое как ошибка, используйте role="alert" aria-live="assertive"
, в противном случае используйте атрибуты role="status" aria-live="polite"
.
Поскольку содержимое, которое вы отображаете, изменяется, не забудьте обновить время ожидания delay
timeout, чтобы у людей было достаточно времени, чтобы прочитать сообщение.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
При использовании autohide: false
необходимо добавить кнопку закрытия, чтобы пользователи могли закрыть сообщение.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 мин. назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Привет мир! Это тост-сообщение.
</div>
</div>
Sass
Переменные
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba(0, 0, 0, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba(0, 0, 0, .05);
Использование
Инициализация всплывающих сообщений через JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Параметры
Опции могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-bs-
как в data-bs-animation=""
.
Наименование | Тип | По умолчанию | Описание |
---|---|---|---|
animation |
boolean | true |
Применить переход CSS fade к тосту |
autohide |
boolean | true |
Автоматически скрывать тост |
delay |
number |
5000
|
Задержка скрытия тоста (мс) |
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход. Они возвращаются к вызывающей стороне, как только начинается переход, но до его завершения. Кроме того, вызов метода для переходного компонента будет игнорироваться.
Смотрите нашу документацию JavaScript для получения дополнительной информации..
show
Раскрывает всплывающие сообщения элемента. Возврат к вызывающей стороне до того, как тост будет фактически показан (то есть до того, как произойдет событие shown.bs.toast
). Вы должны вручную вызвать этот метод, вместо этого ваше всплывающее сообщение не будет отображаться.
toast.show()
hide
Скрывает всплывающие сообщения элемента. Возврат к вызывающей стороне до того, как тост будет фактически скрыт (то есть до того, как произойдет событие hidden.bs.toast
). Вы должны вручную вызвать этот метод, если вы сделали autohide
к false
.
toast.hide()
dispose
Скрывает всплывающие сообщения элемента. Ваше всплывающее сообщение останется в DOM, но больше не будет отображаться.
toast.dispose()
События
Тип событий | Описание |
---|---|
show.bs.toast |
Это событие вызывается сразу после вызова метода show . |
shown.bs.toast |
Это событие вызывается, когда всплывающее сообщение видимо для пользователя. |
hide.bs.toast |
Это событие вызывается сразу после вызова метода экземпляра hide . |
hidden.bs.toast |
Это событие вызывается, когда всплывающее сообщение уже скрыт от пользователя. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// сделайте что-нибудь...
})