Toasts

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

Обзор

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

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

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

Примеры

Базовый

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

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

Hello, world! This is a toast message.

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

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

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

Hello, world! This is a toast message.

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

Stacking

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

See? Just like this.

Heads up, toasts will stack automatically

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

Размещение

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

Hello, world! This is a toast message.

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

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

See? Just like this.

Heads up, toasts will stack automatically

<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 для выравнивания Toasts по горизонтали и / или вертикали.

Hello, world! This is a toast message.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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>

Доступность

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

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

Кроме того, необходимо адаптировать 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-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

При использовании autohide: false вы должны добавить кнопку закрытия, чтобы пользователи могли закрыть Toasts.

Hello, world! This is a toast message.

<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

Применение

Инициализировать Toasts с помощью JavaScript:

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

Параметры

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

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

Методы

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

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

См. документацию по JavaScript для получения дополнительной информации .

show (показать)

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

toast.show()

hide (скрыть)

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

toast.hide()

dispose

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

toast.dispose()

События

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

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () { 
  // do something...
})