Тосты
Націскныя апавяшчэнні для вашых наведвальнікаў з тостам, лёгкім і лёгка наладжвальным папярэджаннем.
Тосты - гэта лёгкія апавяшчэнні, створаныя для імітацыі 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
рэгіён . Змены ў жывых рэгіёнах (напрыклад, увядзенне/абнаўленне кампанента тоста) аўтаматычна абвяшчаюцца праграмамі чытання з экрана без неабходнасці перамяшчаць фокус карыстальніка або іншым чынам перапыняць яго. Акрамя таго, уключыце, 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.тост | Гэта падзея запускаецца, калі тост становіцца бачным для карыстальніка. |
hide.bs.toast | Гэта падзея запускаецца адразу пасля hide выкліку метаду асобніка. |
hidden.bs.toast | Гэта падзея запускаецца, калі тост перастае быць схаваным ад карыстальніка. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})