Всплывающие сообщения
Настраивайте всплывающие сообщения для предупреждающих уведомлений посетителей.
Всплывающие сообщения (Toasts) - это легкие уведомления, разработанные для имитации push-уведомлений, которые были популярны в мобильных и настольных операционных системах. Они построены с flexbox, поэтому их легко выровнять и расположить.
Обзор
Что нужно знать при использовании:
- Всплывающие сообщения включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
- Всплывающие сообщения будут автоматически скрываться, если вы не укажете
autohide: false.
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion. Смотрите раздел по ограничении анимации в нашей документации.
Примеры
Основной
Чтобы поощрить растяжимые и предсказуемые всплывающие сообщения, мы рекомендуем помещать их в заголовок и тело. В заголовках Всплывающие сообщения используется display: flex что позволяет легко выравнивать содержимое благодаря нашим утилитам margin и flexbox.
Всплывающие сообщения можно гибко настраивать под ваши потребности с минимальными настройками. Как минимум необходимо чтобы один «элемент» содержал ваш контент и настоятельно рекомендуем использовать кнопку закрытия.
<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин. назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет мир! Это тост-сообщение. </div></div>Live
Нажмите кнопку ниже, чтобы отобразить тост (расположенный с нашими утилитами в правом нижнем углу), который по умолчанию был скрыт с помощью .hide.
<buttontype="button"class="btn btn-primary"id="liveToastBtn">Показать лайв тосты</button><divclass="position-fixed bottom-0 end-0 p-3"style="z-index: 11"><divid="liveToast"class="toast hide"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет, мир! Это тост-сообщение. </div></div></div>Полупрозрачность
Всплывающие сообщения также немного полупрозрачные. Для браузеров, поддерживающих CSS свойство фонового фильтра backdrop-filter, будут размыты элементы под всплывающим сообщением.
<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-muted">11 мин. назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет мир! Это тост-сообщение. </div></div>Стек
Если у вас есть несколько всплывающих сообщений, они по умолчанию размещаются вертикально друг под другом в удобочитаемой форме.
<divclass="toast-container"><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-muted">прямо сейчас</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Видите? Именно так. </div></div><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-muted">2 секунды назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Внимание, всплывающие сообщения складываются автоматически </div></div></div>Пользовательский контент
Настройте свои тосты, удалив субкомпоненты, настроив с помощью утилит или добавив собственную разметку. Здесь мы создали более простой тост, удалив по умолчанию .toast-header, добавив собственную иконку скрытия из Иконок Bootstrap, и используя некоторые утилиты flexbox, чтобы настроить макет.
<divclass="toast align-items-center"role="alert"aria-live="assertive"aria-atomic="true"><divclass="d-flex"><divclass="toast-body"> Привет, мир! Это тост-сообщение. </div><buttontype="button"class="btn-close me-2 m-auto"data-bs-dismiss="toast"aria-label="Закрыть"></button></div></div>Кроме того, Вы также можете добавить в тосты дополнительные элементы управления и компоненты.
<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-body"> Привет мир! Это тост-сообщение. <divclass="mt-2 pt-2 border-top"><buttontype="button"class="btn btn-primary btn-sm">Действовать</button><buttontype="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.
<divclass="toast align-items-center text-white bg-primary border-0"role="alert"aria-live="assertive"aria-atomic="true"><divclass="d-flex"><divclass="toast-body"> Привет, мир! Это тост-сообщение. </div><buttontype="button"class="btn-close btn-close-white me-2 m-auto"data-bs-dismiss="toast"aria-label="Закрыть"></button></div></div>Размещение
Размещайте всплывающие сообщения с помощью пользовательских параметров CSS по мере необходимости. Верхний правый угол часто используется для уведомлений, как и верхний средний. Если вы собираетесь показывать только одно сообщение за раз, поместите стили позиционирования прямо на .toast.
<form><divclass="mb-3"><labelfor="selectToastPlacement">Размещение тостов</label><selectclass="form-select mt-2"id="selectToastPlacement"><optionvalue=""selected>Выберите позицию...</option><optionvalue="top-0 start-0">Верх слева</option><optionvalue="top-0 start-50 translate-middle-x">Верх по центру</option><optionvalue="top-0 end-0">Верх справа</option><optionvalue="top-50 start-0 translate-middle-y">Середина слева</option><optionvalue="top-50 start-50 translate-middle">Середина по центру</option><optionvalue="top-50 end-0 translate-middle-y">Середина справа</option><optionvalue="bottom-0 start-0">Низ слева</option><optionvalue="bottom-0 start-50 translate-middle-x">Низ по центру</option><optionvalue="bottom-0 end-0">Низ справа</option></select></div></form><divaria-live="polite"aria-atomic="true"class="bg-dark position-relative bd-example-toasts"><divclass="toast-container position-absolute p-3"id="toastPlacement"><divclass="toast"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин назад</small></div><divclass="toast-body"> Привет мир! Это тост-сообщение. </div></div></div></div>Для систем, которые генерируют больше уведомлений, рассмотрите возможность использования элемента обтекания, чтобы они могли легко складываться.
<divaria-live="polite"aria-atomic="true"class="position-relative"><!-- Позиционируйте его: --><!-- - `.toast-container` для промежутка между тостами --><!-- - `.position-absolute`, `top-0` & `end-0` чтобы тосты располагались в правом верхнем углу --><!-- - `.p-3` чтобы тосты не прилипали к краю контейнера --><divclass="toast-container position-absolute top-0 end-0 p-3"><!-- Затем положите тосты внутрь --><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-muted">just now</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Видно? Именно так. </div></div><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-muted">2 секунды назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Внимание, тосты складываются автоматически </div></div></div></div>Вы также можете использовать утилиты flexbox для выравнивания тостов по горизонтали и/или вертикали.
<!-- Контейнер Flexbox для выравнивания тостов --><divaria-live="polite"aria-atomic="true"class="d-flex justify-content-center align-items-center w-100"><!-- Затем положите тосты внутрь --><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="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, чтобы у людей было достаточно времени, чтобы прочитать сообщение.
<divclass="toast"role="alert"aria-live="polite"aria-atomic="true"data-delay="10000"><divrole="alert"aria-live="assertive"aria-atomic="true">...</div></div>При использовании autohide: false необходимо добавить кнопку закрытия, чтобы пользователи могли закрыть сообщение.
<divrole="alert"aria-live="assertive"aria-atomic="true"class="toast"data-bs-autohide="false"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин. назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="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:
vartoastElList=[].slice.call(document.querySelectorAll('.toast'))vartoastList=toastElList.map(function(toastEl){returnnewbootstrap.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 | Это событие вызывается, когда всплывающее сообщение уже скрыт от пользователя. |
varmyToastEl=document.getElementById('myToast')myToastEl.addEventListener('hidden.bs.toast',function(){// сделайте что-нибудь...
})