Тости
Push-сповіщення для ваших відвідувачів з тостом, легким і легко настроюваним сповіщенням.
Тости — це легкі сповіщення, створені для імітації push-повідомлень, які популяризували мобільні та настільні операційні системи. Вони створені за допомогою flexbox, тому їх легко вирівняти та розташувати.
Огляд
Що потрібно знати під час використання плагіна toast:
- Якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібно
util.js
. - Тости підключаються з міркувань продуктивності, тому ви повинні ініціалізувати їх самостійно .
- Зверніть увагу, що ви несете відповідальність за розміщення тостів.
- Тости автоматично приховуються, якщо ви не вкажете
autohide: false
.
Ефект анімації цього компонента залежить від prefers-reduced-motion
медіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .
Приклади
Базовий
Щоб заохочувати розширювані та передбачувані тости, ми рекомендуємо заголовок і тіло. Заголовки Toast використовують display: flex
, що дозволяє легко вирівнювати вміст завдяки нашим утилітам margin і flexbox.
Тости настільки гнучкі, як вам потрібно, і мають дуже невелику розмітку. Ми вимагаємо, щоб ваш «підсмажений» вміст містив принаймні один елемент, і ми настійно рекомендуємо кнопку закриття.
Напівпрозорий
Тости також трохи напівпрозорі, тож вони змішуються з тим, що може виглядати поверх. Для браузерів, які підтримують backdrop-filter
властивість CSS, ми також спробуємо розмити елементи під тостом.
Укладання
Якщо у вас є кілька тостів, ми за замовчуванням розташовуємо їх вертикально, щоб їх було зручно читати.
Розміщення
Розміщуйте тости за допомогою спеціального CSS, як вам потрібно. Верхній правий часто використовується для сповіщень, як і верхній середній. Якщо ви збираєтеся показувати лише один тост за раз, розмістіть стилі позиціонування прямо на .toast
.
Для систем, які генерують більше сповіщень, розгляньте можливість використання елемента обгортання, щоб їх можна було легко складати.
Ви також можете скористатися утилітами flexbox, щоб вирівняти тости горизонтально та/або вертикально.
Доступність
Тости мають на меті невелике переривання ваших відвідувачів або користувачів, тому, щоб допомогти тим, хто має програми зчитування з екрана та подібні допоміжні технології, ви повинні обернути свої тости в aria-live
регіон . Зміни в активних регіонах (наприклад, ін’єкція/оновлення компонента toast) автоматично оголошуються програмами зчитування з екрана без необхідності переміщувати фокус користувача чи іншим чином переривати його. Крім того, включіть, aria-atomic="true"
щоб гарантувати, що весь тост завжди оголошується як єдиний (атомарний) блок, а не повідомляється про те, що було змінено (що може призвести до проблем, якщо ви оновлюєте лише частину вмісту тосту або якщо відображатимете той самий вміст тосту на більш пізній момент часу). Якщо потрібна інформація важлива для процесу, наприклад, для списку помилок у формі, тоді використовуйте компонент сповіщеннязамість тосту.
Зауважте, що активна область має бути присутня в розмітці перед тим , як буде створено або оновлено тост. Якщо ви динамічно генеруєте обидва одночасно та вставляєте їх на сторінку, вони, як правило, не будуть оголошені допоміжними технологіями.
Вам також потрібно адаптувати рівень role
і aria-live
залежно від вмісту. Якщо це важливе повідомлення, як-от помилка, використовуйте role="alert" aria-live="assertive"
, інакше використовуйте role="status" aria-live="polite"
атрибути.
Оскільки вміст, який ви відображаєте, змінюється, не забудьте оновити час delay
очікування , щоб люди мали достатньо часу, щоб прочитати тост.
Якщо ви використовуєте autohide: false
, ви повинні додати кнопку закриття, щоб дозволити користувачам відхиляти тост.
Поведінка JavaScript
Використання
Ініціалізація тостів через JavaScript:
Опції
Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-
, як у data-animation=""
.
Ім'я | Тип | За замовчуванням | опис |
---|---|---|---|
анімація | логічний | правда | Застосуйте CSS-зникнення переходу до тосту |
автосхов | логічний | правда | Автоматично приховати тост |
затримка | номер | 500 |
Затримка приховування тосту (мс) |
методи
Асинхронні методи та переходи
Усі методи API є асинхронними та починають перехід . Вони повертаються до абонента, щойно перехід починається, але до його завершення . Крім того, виклик методу компонента, що переходить, ігноруватиметься .
Дивіться нашу документацію JavaScript для отримання додаткової інформації .
$().toast(options)
Додає обробник тостів до колекції елементів.
.toast('show')
Розкриває тост елемента. Повертається до абонента до того, як тост буде фактично показано (тобто до shown.bs.toast
події). Ви повинні вручну викликати цей метод, натомість ваш тост не відображатиметься.
.toast('hide')
Приховує тост елемента. Повертається до абонента до того, як тост буде фактично приховано (тобто до того , як відбудеться hidden.bs.toast
подія). Ви повинні вручну викликати цей метод, якщо ви перейшли autohide
до false
.
.toast('dispose')
Приховує тост елемента. Ваш тост залишиться в DOM, але більше не відображатиметься.
Події
Тип події | опис |
---|---|
show.bs.toast | Ця подія запускається негайно, коли show викликається метод екземпляра. |
показаний.bs.toast | Ця подія запускається, коли тост стає видимим для користувача. |
hide.bs.toast | Ця подія запускається негайно після hide виклику методу екземпляра. |
hidden.bs.toast | Ця подія запускається, коли тост закінчується приховуванням від користувача. |