Всплывающие сообщения

Пуш-уведомления для посетителей с тостом, легким и легко настраиваемым предупреждающим сообщением.

На этой странице

Тосты - это легкие уведомления, имитирующие пуш-уведомления, которые были популяризированы в мобильных и настольных операционных системах. Они построены с помощью 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>

Ранее наши скрипты динамически добавляли класс .hide, чтобы полностью скрыть тост (с помощью display:none, а не только с opacity:0). Теперь в этом больше нет необходимости. Однако для обратной совместимости наш сценарий будет продолжать переключать класс (даже если в этом нет практической необходимости) до следующей основной версии.

Живой пример

Нажмите кнопку ниже, чтобы отобразить тост (расположенный с нашими утилитами в правом нижнем углу), который по умолчанию скрыт.

Привет, мир! Это тост-сообщение.

<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" 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>

Мы используем следующий код JavaScript для запуска нашей демонстрации тостов:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Полупрозрачный

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

Привет мир! Это тост-сообщение.

<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 Icons и используя некоторые утилиты 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, чтобы у пользователей было достаточно времени, чтобы прочитать тост.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-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>

Хотя технически можно добавить в тосты настраиваемые/активные элементы управления (например, дополнительные кнопки или ссылки), вам следует избегать этого для автоматического скрытия тостов. Даже если вы зададите тосту длинный тайм-аут delay, пользователям клавиатуры и вспомогательных технологий может быть трудно вовремя добраться до тоста, чтобы принять меры (поскольку тосты не получают фокус при отображении) . Если вам абсолютно необходимы дополнительные элементы управления, мы рекомендуем использовать всплывающее окно с autohide: false.

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($black, .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($black, .05);

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

Инициализировать тосты через JavaScript:

var toastElList = Array.prototype.slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Триггеры

Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри toast, как показано ниже:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

или на кнопке за пределами toast с помощью data-bs-target, как показано ниже:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Параметры

Параметры могут передаваться через атрибуты данных или 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()

getInstance

Статический метод, который позволяет вам получить экземпляр тоста, связанный с элементом DOM.

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Возвращает экземпляр тоста Bootstrap

getOrCreateInstance

Статический метод, который позволяет вам получить экземпляр тоста, связанный с элементом DOM, или создать новый, если он не был инициализирован

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Возвращает экземпляр тоста Bootstrap

События

Тип события	Описание
`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 () {
  // сделайте что-нибудь...
})