Тости

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

На цій сторінці

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

Огляд

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

Тости підключаються з міркувань продуктивності, тому ви повинні ініціалізувати їх самостійно .
Тости автоматично приховуються, якщо ви не вкажете 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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Раніше наші сценарії динамічно додавали .hideклас, щоб повністю приховати тост (з display:none, а не просто з opacity:0). Тепер це вже не потрібно. Однак для зворотної сумісності наш сценарій продовжуватиме перемикати клас (хоча в цьому немає практичної потреби) до наступної основної версії.

Живий приклад

Натисніть кнопку нижче, щоб показати тост (розташований разом із нашими утилітами в нижньому правому куті), який було приховано за умовчанням.

Привіт Світ! Це повідомлення тосту.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Ми використовуємо наступний код JavaScript, щоб запустити нашу живу демонстрацію тосту:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Напівпрозорий

Тости злегка прозорі, щоб зливатися з тим, що знаходиться під ними.

Привіт Світ! Це повідомлення тосту.

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

Укладання

Ви можете скласти тости, загорнувши їх у контейнер для тостів, який вертикально додасть трохи відстані.

Побачити? Просто так.

Застереження, тости складатимуться автоматично

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

Спеціальний контент

Налаштуйте свої тости, видаливши підкомпоненти, налаштувавши їх за допомогою утиліт або додавши власну розмітку. Тут ми створили простіший тост, видаливши значення за замовчуванням .toast-header, додавши спеціальну піктограму приховування з Bootstrap Icons і використовуючи деякі утиліти flexbox для налаштування макета.

Привіт Світ! Це повідомлення тосту.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Крім того, ви також можете додати додаткові елементи керування та компоненти до тостів.

Привіт Світ! Це повідомлення тосту.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Кольорові схеми

Спираючись на наведений вище приклад, ви можете створювати різні схеми кольорів тостів за допомогою наших утиліт кольору та фону . Тут ми додали .bg-primaryі .text-whiteдо .toast, а потім додали .btn-close-whiteдо нашої кнопки закриття. Для чіткості краю ми видаляємо рамку за замовчуванням за допомогою .border-0.

Привіт Світ! Це повідомлення тосту.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Розміщення

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

Привіт Світ! Це повідомлення тосту.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Для систем, які генерують більше сповіщень, розгляньте можливість використання елемента обгортання, щоб їх можна було легко складати.

Побачити? Просто так.

Застереження, тости складатимуться автоматично

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Хоча з технічної точки зору можливо додати елементи керування (наприклад, додаткові кнопки чи посилання) у ваш тост, вам слід уникати цього для автоматичних приховуваних тостів. Навіть якщо ви дасте тосту тривалий час delayочікування , користувачам клавіатури та допоміжних технологій може бути важко вчасно дістатися до тосту, щоб виконати дію (оскільки тости не отримують фокус, коли вони відображаються). Якщо вам абсолютно необхідні додаткові елементи керування, ми рекомендуємо використовувати тост із autohide: false.

Сасс

Змінні

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Використання

Ініціалізація тостів через JavaScript:

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

Тригери

Звільнення можна досягти за допомогою dataатрибута на кнопці в тості , як показано нижче:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

або на ґудзику поза тостом , використовуючи, data-bs-targetяк показано нижче:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Опції

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

Ім'я	Тип	За замовчуванням	опис
`animation`	логічний	`true`	Застосуйте CSS-зникнення переходу до тосту
`autohide`	логічний	`true`	Автоматично приховати тост
`delay`	номер	`5000`	Затримка приховування тосту (мс)

методи

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

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

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

шоу

Розкриває тост елемента. Повертається до абонента до того, як тост буде фактично показано (тобто до shown.bs.toastподії). Ви повинні вручну викликати цей метод, натомість ваш тост не відображатиметься.

toast.show()

приховати

Приховує тост елемента. Повертається до абонента до того, як тост буде фактично приховано (тобто до того , як відбудеться hidden.bs.toastподія). Ви повинні вручну викликати цей метод, якщо ви перейшли autohideдо false.

toast.hide()

розпоряджатися

Приховує тост елемента. Ваш тост залишиться в DOM, але більше не відображатиметься.

toast.dispose()

getInstance

Статичний метод, який дозволяє отримати екземпляр toast, пов’язаний з елементом DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Статичний метод, який дозволяє вам отримати екземпляр toast, пов’язаний з елементом DOM, або створити новий, якщо він не був ініціалізований

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Події

Тип події	опис
`show.bs.toast`	Ця подія запускається негайно, коли `show`викликається метод екземпляра.
`shown.bs.toast`	Ця подія запускається, коли тост стає видимим для користувача.
`hide.bs.toast`	Ця подія запускається негайно після `hide`виклику методу екземпляра.
`hidden.bs.toast`	Ця подія запускається, коли тост закінчується приховуванням від користувача.

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