Тости
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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Жити
Натисніть кнопку нижче, щоб показати тост (розташований разом із нашими утилітами в нижньому правому куті), який за умовчанням приховано за допомогою .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</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">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
Розміщення
Розміщуйте тости за допомогою спеціального CSS, як вам потрібно. Верхній правий часто використовується для сповіщень, як і верхній середній. Якщо ви збираєтеся показувати лише один тост за раз, розмістіть стилі позиціонування прямо на .toast
.
<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">×</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">×</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">×</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="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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Хоча з технічної точки зору можливо додати елементи керування (наприклад, додаткові кнопки чи посилання) у ваш тост, вам слід уникати цього для автоматичних приховуваних тостів. Навіть якщо ви дасте тосту тривалий час delay
очікування , користувачам клавіатури та допоміжних технологій може бути важко вчасно дістатися до тосту, щоб виконати дію (оскільки тости не отримують фокус, коли вони відображаються). Якщо вам абсолютно необхідні додаткові елементи керування, ми рекомендуємо використовувати тост із autohide: false
.
Поведінка 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...
})