Source

Тости

Push-сповіщення для ваших відвідувачів з тостом, легким і легко настроюваним сповіщенням.

Тости — це легкі сповіщення, створені для імітації push-повідомлень, які популяризували мобільні та настільні операційні системи. Вони створені за допомогою flexbox, тому їх легко вирівняти та розташувати.

Огляд

Що потрібно знати під час використання плагіна toast:

  • Якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібноutil.js .
  • Тости підключаються з міркувань продуктивності, тому ви повинні ініціалізувати їх самостійно .
  • Зверніть увагу, що ви несете відповідальність за розміщення тостів.
  • Тости автоматично приховуються, якщо ви не вкажете autohide: false.

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

Приклади

Базовий

Щоб заохочувати розширювані та передбачувані тости, ми рекомендуємо заголовок і тіло. Заголовки Toast використовують 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.

Bootstrap 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регіон . Зміни в активних регіонах (наприклад, ін’єкція/оновлення компонента toast) автоматично оголошуються програмами зчитування з екрана без необхідності переміщувати фокус користувача чи іншим чином переривати його. Крім того, включіть, 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')

Події

Тип події опис
show.bs.toast Ця подія запускається негайно, коли showвикликається метод екземпляра.
показаний.bs.toast Ця подія запускається, коли тост стає видимим для користувача.
hide.bs.toast Ця подія запускається негайно після hideвиклику методу екземпляра.
hidden.bs.toast Ця подія запускається, коли тост закінчується приховуванням від користувача. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})