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

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

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

Тосты - это легкие уведомления, имитирующие пуш-уведомления, которые были популяризированы в мобильных и настольных операционных системах. Они построены с помощью Flexbox, поэтому их легко выровнять и расположить.

Обзор

Что нужно знать при использовании плагина всплывающих сообщений:

Всплывающие сообщения включены по соображениям производительности, поэтому Вы должны инициализировать их самостоятельно.
Всплывающие сообщения будут автоматически скрываться, если Вы не укажете autohide: false.

Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion. См. раздел с уменьшенным движением в нашей документации по специальным возможностям.

Примеры

Базовый

Чтобы поощрять расширяемые и предсказуемые тосты, мы рекомендуем заголовок и тело. Заголовки тостов используют display: flex, что позволяет легко выравнивать контент благодаря нашим утилитам margin и flexbox.

Тосты настолько гибкие, насколько Вам нужно, и требуют очень небольшой разметки. Как минимум, мы требуем, чтобы Ваш “всплывающий” контент содержал один элемент, и настоятельно рекомендуем кнопку «закрыть».

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

html

<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="toast-container position-fixed bottom-0 end-0 p-3">
  <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 для запуска нашей демонстрации тостов:

site/assets/js/snippets.js

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}

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

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

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

html

<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-body-secondary">11 мин. назад</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
  </div>
  <div class="toast-body">
    Привет мир! Это тост-сообщение.
  </div>
</div>

Укладка

Вы можете складывать всплывающие сообщения, завернув их в контейнер для тостов, который по вертикали добавит некоторого расстояния.

Видите? Именно так.

Внимание, всплывающие сообщения складываются автоматически

html

<div class="toast-container position-static">
  <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-body-secondary">прямо сейчас</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-body-secondary">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 для настройки макета.

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

html

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

Кроме того, Вы также можете добавить в тосты дополнительные элементы управления и компоненты.

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

html

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

Цветовые схемы

Основываясь на приведенном выше примере, вы можете создавать различные цветовые схемы всплывающих уведомлений с помощью утилит цвета и фона. Здесь мы добавили .text-bg-primary к .toast, а затем добавили .btn-close-white к нашей кнопке закрытия. Для четкого края мы удаляем границу по умолчанию с помощью .border-0.

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

html

<div class="toast align-items-center text-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.

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

html

<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-body-secondary position-relative bd-example-toasts rounded-3">
  <div class="toast-container 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>

Для систем, которые генерируют больше уведомлений, рассмотрите возможность использования элемента упаковки, чтобы их можно было легко складывать.

Видно? Именно так.

Внимание, тосты складываются автоматически

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Позиционируйте его: -->
  <!-- - `.toast-container` для промежутка между тостами -->
  <!-- - `top-0` и `end-0` чтобы тосты располагались в правом верхнем углу -->
  <!-- - `.p-3` чтобы тосты не прилипали к краю контейнера  -->
  <div class="toast-container 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-body-secondary">прямо сейчас</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-body-secondary">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 для выравнивания тостов по горизонтали и/или вертикали.

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

html

<!-- Flexbox container for aligning the toasts -->
<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 Вы должны добавить кнопку закрытия, чтобы пользователи могли закрыть всплывающее сообщение.

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

html

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

CSS

Переменные

Добавлено в версии 5.2.0

Как часть развивающегося подхода Bootstrap к переменным CSS, тосты теперь используют локальные переменные CSS в .toast для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

scss/_toasts.scss

--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass переменные

scss/_variables.scss

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

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

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

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Триггеры

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

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>

или на кнопке вне toast, используя дополнительный data-bs-target, как показано ниже:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Закрыть"></button>

Опции

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Обязательно измените тип регистра имени параметра с “camelCase” на “kebab-case” при передаче параметров через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Окончательный объект конфигурации — это объединенный результат data-bs-config, data-bs- и js object, где последний заданный ключ-значение переопределяет другие.

Название	Тип	По умолчанию	Описание
`animation`	boolean	`true`	Примените CSS-переход затухания к тосту.
`autohide`	boolean	`true`	Автоматически скрывать тост после задержки.
`delay`	number	`5000`	Задержка в миллисекундах перед тем, как скрыть всплывающее уведомление.

Методы

Все методы API являются асинхронными и запускают переход. Они возвращаются вызывающей стороне сразу после начала перехода, но до его завершения. Кроме того, вызов метода переходного компонента будет игнорироваться. Подробнее читайте в нашей документации по JavaScript.

Метод	Описание
`dispose`	Скрывает тост элемента. Ваше всплывающее уведомление останется в DOM, но больше не будет отображаться.
`getInstance`	Статический метод, позволяющий получить экземпляр тоста, связанный с элементом DOM. Например: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Возвращает экземпляр всплывающего уведомления
`getOrCreateInstance`	Статический метод, который позволяет вам получить экземпляр тоста, связанный с элементом DOM, или создать новый, если он не был инициализирован. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Возвращает экземпляр всплывающего уведомления Bootstrap
`hide`	Скрывает тост элемента. Возвращается к вызывающей стороне до того, как всплывающее уведомление будет фактически скрыто (т. е. до того, как произойдет событие `hidden.bs.toast`). Вы должны вручную вызывать этот метод, если вы установили для `autohide` значение `false`.
`isShown`	Возвращает логическое значение в соответствии с состоянием видимости всплывающего уведомления.
`show`	Показывает тост элемента. Возвращается к вызывающей стороне до того, как всплывающее уведомление действительно будет показано (т. е. до того, как произойдет событие `shown.bs.toast`). Вы должны вручную вызвать этот метод, вместо этого ваш тост не будет отображаться.

События

Событие	Описание
`hide.bs.toast`	Это событие запускается сразу после вызова метода экземпляра `hide`.
`hidden.bs.toast`	Это событие запускается, когда всплывающее уведомление перестает быть скрытым от пользователя.
`show.bs.toast`	Это событие срабатывает немедленно при вызове метода экземпляра `show`.
`shown.bs.toast`	Это событие запускается, когда всплывающее уведомление становится видимым для пользователя.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // сделайте что-нибудь...
})