Тосты

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

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

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

Обзор

Что нужно знать при использовании плагина toast:

Всплывающие уведомления добавляются из соображений производительности, поэтому вы должны инициализировать их самостоятельно .
Тосты будут автоматически скрываться, если вы не укажете 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 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

Живой пример

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

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</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 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

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

    toast.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-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </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-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </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 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Пользовательский контент

Настройте всплывающие уведомления, удалив подкомпоненты, изменив их с помощью утилит или добавив собственную разметку. Здесь мы создали более простое всплывающее уведомление, удалив значение по умолчанию .toast-header, добавив собственный значок скрытия из значков Bootstrap и используя некоторые утилиты flexbox для настройки макета.

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

HTML

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

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

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

HTML

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</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">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Размещение

Размещайте всплывающие уведомления с пользовательским CSS по мере необходимости. Верхний правый часто используется для уведомлений, как и верхний средний. Если вы собираетесь показывать только одно всплывающее уведомление за раз, поместите стили позиционирования прямо в файл .toast.

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

HTML

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <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 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

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

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

HTML

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <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="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </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 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </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">

  <!-- Then put toasts within -->
  <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 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </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 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

CSS

Переменные

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

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

  --#{$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

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

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

Триггеры

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

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

или на кнопке вне тоста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="{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}'.

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

Методы

Асинхронные методы и переходы

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

Дополнительную информацию см. в нашей документации по JavaScript .

Метод	Описание
`dispose`	Скрывает тост элемента. Ваше всплывающее уведомление останется в DOM, но больше не будет отображаться.
`getInstance`	Статический метод, который позволяет вам получить экземпляр всплывающего уведомления, связанный с элементом DOM. Например: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`возвращает экземпляр всплывающего уведомления Bootstrap.
`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', () => {
  // do something...
})