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

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

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

Обзор

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

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

Примеры

Основной

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

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Полупрозрачность

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Стек

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Размещение

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Вы также можете использовать утилиты flexbox для выравнивания тостов по горизонтали и/или вертикали.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Доступность

Всплывающие сообщения предназначены для небольших перерывов в работе ваших посетителей или пользователей, поэтому, чтобы помочь тем, у кого есть программы чтения с экрана и аналогичные вспомогательные технологии, вы должны обернуть свои сообщения aria-live своего региона. Читатели экрана автоматически объявляют об изменениях в живых регионах (таких как добавление / обновление компонента-тоста) без необходимости перемещать фокус пользователя или иным образом прерывать его. Кроме того, включите aria-atomic="true", чтобы гарантировать, что весь тост всегда объявляется как единое (атомарное) устройство, вместо того, чтобы объявлять, что было изменено (что может привести к проблемам, если вы обновляете только часть содержимого тоста, или если отображение того же содержимого тоста в более поздний момент времени). Если необходимая информация важна для процесса, например, для списка ошибок в форме, затем используйте компонент уведомления вместо всплывающего сообщения.

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

Вы также должны адаптировать class="highlighter-rouge">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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Поведение JavaScript

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

Инициализация всплывающих сообщений через JavaScript:

$('.toast').toast(option)

Опции

Опции могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data- как в data-animation="".

Методы

$().toast(options)

Присоединяет обработчик всплывающих сообщений к коллекции элементов.

.toast('show')

Раскрывает всплывающие сообщения элемента. Возврат к вызывающей стороне до того, как тост будет фактически показан (то есть до того, как произойдет событие shown.bs.toast). Вы должны вручную вызвать этот метод, вместо этого ваше всплывающее сообщение не будет отображаться.

$('#element').toast('show')

.toast('hide')

Скрывает всплывающие сообщения элемента. Возврат к вызывающей стороне до того, как тост будет фактически скрыт (то есть до того, как произойдет событие hidden.bs.toast). Вы должны вручную вызвать этот метод, если вы сделали autohide к false.

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

События

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})