Перейти к основному содержанию

Toasts

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

Содержание

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

Обзор

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

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

Примеры

Базовый

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

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

<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, мы также попытаемся размыть элементы под тостом.

<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, мы по умолчанию располагаем их вертикально для удобного чтения.

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

Bootstrap 11 mins ago
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>

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

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

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

<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...
})
Комментарии для сайта Cackle