Source

Тосты

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

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

Обзор

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

  • Если вы создаете наш JavaScript из исходного кода, для этого требуется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>

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

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

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

Начальная загрузка 11 минут назад
Привет, мир! Это тост-сообщение. 
<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="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>

Доступность

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

Имя Тип По умолчанию Описание
анимация логический истинный Примените к всплывающему уведомлению плавный переход CSS
авто-скрытие логический истинный Автоматически скрывать тост
задерживать количество 500 Задержка скрытия всплывающего уведомления (мс)

Методы

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

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

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

$().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')

События

Тип события Описание
показать.bs.toast Это событие срабатывает сразу же при showвызове метода экземпляра.
показанный.bs.toast Это событие запускается, когда всплывающее уведомление становится видимым для пользователя.
скрыть.bs.toast Это событие запускается сразу после hideвызова метода экземпляра.
скрытый.bs.toast Это событие запускается, когда всплывающее уведомление перестает быть скрытым от пользователя. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})