Toasts
E hoʻolaha i nā leka hoʻomaopopo i kāu poʻe malihini me kahi toast, kahi leka makaʻala māmā a maʻalahi hoʻi.
ʻO nā Toasts nā leka hoʻomaopopo māmā i hoʻolālā ʻia e hoʻohālike i nā leka hoʻolaha i hoʻolaha ʻia e nā ʻōnaehana kelepona a me nā papa hana. Ua kūkulu ʻia lākou me ka flexbox, no laila ua maʻalahi lākou e align a hoʻonohonoho.
Nānā nui
Nā mea e ʻike ai i ka hoʻohana ʻana i ka plugin toast:
- Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, pono
util.js
ia . - Hoʻokomo ʻia nā toasts no nā kumu hana, no laila pono ʻoe e hoʻomaka iā lākou iho .
- E ʻoluʻolu e hoʻomaopopo iā ʻoe ke kuleana no ka hoʻonohonoho ʻana i nā toasts.
- E hūnā ʻokoʻa nā Toasts inā ʻaʻole ʻoe e kuhikuhi
autohide: false
.
prefers-reduced-motion
nīnau media. E ʻike
i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .
Nā laʻana
Kumu
No ka paipai ʻana i nā toast hiki ke hoʻonui ʻia a hiki ke wānana, paipai mākou i ke poʻo a me ke kino. Hoʻohana ʻia nā poʻomanaʻo Toast display: flex
, e ʻae i ka alignment maʻalahi o ka ʻike e hoʻomaikaʻi i kā mākou margin a me flexbox pono.
Hiki ke maʻalahi nā toasts e like me kāu e pono ai a he liʻiliʻi loa ka markup i koi ʻia. Ma ka liʻiliʻi loa, koi mākou i hoʻokahi mea e loaʻa i kāu ʻike "toasted" a paipai ikaika i kahi pihi hoʻokuʻu.
<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>
Ola
E kaomi i ke pihi ma lalo nei e hōʻike i kahi kīʻaha (i hoʻonoho ʻia me kā mākou mau pono hana ma ka ʻaoʻao ʻākau lalo) i hūnā ʻia e ka paʻamau me .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>
Alohilohi
ʻO nā mea hoʻomaʻemaʻe he translucent e hui pū me nā mea ma lalo o lākou.
<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>
Hoʻopaʻa ʻana
Ke loaʻa iā ʻoe nā toasts he nui, paʻamau mākou i ka hoʻopaʻa ʻana iā lākou ma ke ʻano hiki ke heluhelu ʻia.
<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>
Hoʻokomo
E kau i nā toasts me ka CSS maʻamau e like me kou makemake. Hoʻohana pinepine ʻia ka ʻākau luna no ka hoʻolaha ʻana, e like me ka waena waena. Inā ʻoe e hōʻike ana i hoʻokahi toast i ka manawa, e kau pono i nā ʻano hoʻonohonoho ma ka .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>
No nā ʻōnaehana hoʻolaha hou aku, e noʻonoʻo e hoʻohana i kahi mea wīwī i hiki iā lākou ke hoʻopaʻa maʻalahi.
<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>
Hiki iā ʻoe ke leʻaleʻa me nā pono hana flexbox e hoʻohālikelike i nā toasts ma ke alo a / a i ʻole ke kū pololei.
<!-- 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>
Hiki ke komo
Manaʻo ʻia ʻo Toasts i mea hoʻopau liʻiliʻi i kāu poʻe malihini a i ʻole mea hoʻohana, no laila e kōkua i ka poʻe me nā mea heluhelu pale a me nā ʻenehana kōkua like, pono ʻoe e hoʻopili i kāu toast ma kahi aria-live
ʻāpana . Hoʻolaha ʻia nā hoʻololi ʻana i nā wahi ola (e like me ka hoʻopiʻi ʻana/hōʻano hou ʻana i kahi ʻāpana toast) e ka poʻe heluhelu pale me ka pono ʻole e hoʻoneʻe i ka manaʻo o ka mea hoʻohana a i ʻole ke hoʻopau i ka mea hoʻohana. Eia hou, e hoʻokomo aria-atomic="true"
e hōʻoia i ka hoʻolaha mau ʻana o ka toast holoʻokoʻa ma ke ʻano he ʻāpana hoʻokahi (atomic), ma mua o ka hoʻolaha ʻana i ka mea i hoʻololi ʻia (hiki ke alakaʻi i nā pilikia inā ʻoe e hōʻano hou i kahi ʻāpana o ka ʻai o ka toast, a i ʻole ke hōʻike ʻana i ka maʻiʻo toast like. i kekahi manawa ma hope aku). Inā he mea koʻikoʻi ka ʻike e pono ai no ke kaʻina hana, e laʻa no ka papa inoa o nā hewa ma kahi ʻano, a laila e hoʻohana i ka ʻāpana makaʻalama kahi o ka toast.
E hoʻomanaʻo pono e loaʻa ka ʻāina ola i ka markup ma mua o ka hana ʻana a i ʻole ka hoʻonui ʻia ʻana o ka toast. Inā hoʻoikaika ikaika ʻoe i ka manawa like a hoʻokomo iā lākou i loko o ka ʻaoʻao, ʻaʻole e hoʻolaha ʻia e nā ʻenehana kōkua.
Pono ʻoe e hoʻololi i ka role
a me ka aria-live
pae ma muli o ka ʻike. Inā he memo koʻikoʻi e like me ka hewa, e hoʻohana role="alert" aria-live="assertive"
, a i ʻole e hoʻohana role="status" aria-live="polite"
i nā ʻano.
Ke hoʻololi nei ka ʻike āu e hōʻike nei, e hōʻoia e hōʻano hou i ka delay
manawa pau i loaʻa i nā mea hoʻohana ka manawa e heluhelu ai i ka toast.
<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>
I ka hoʻohana ʻana iā autohide: false
, pono ʻoe e hoʻohui i kahi pihi pani e ʻae i nā mea hoʻohana e hoʻopau i ka toast.
<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>
ʻOiai hiki i ka ʻenehana ke hoʻohui i nā mana kikoʻī/actionable (e like me nā pihi hou a i ʻole nā loulou) i kāu toast, pono ʻoe e pale i ka hana ʻana i kēia no ka huna ʻana i nā toasts. ʻOiai inā hāʻawi ʻoe i ka toast i kahi delay
manawa lōʻihi , paʻakikī paha nā mea hoʻohana ʻenehana kōkua i ka hiki ʻana i ka toast i ka manawa e hana ai (no ka mea, ʻaʻole i loaʻa ka manaʻo o ka toast ke hōʻike ʻia). Inā loaʻa iā ʻoe nā mana hou aʻe, paipai mākou e hoʻohana i ka toast me autohide: false
.
ʻO ka hana JavaScript
Hoʻohana
E hoʻomaka i nā toast ma o JavaScript:
$('.toast').toast(option)
Nā koho
Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-
, e like me ka data-animation=""
.
inoa | ʻAno | Default | wehewehe |
---|---|---|---|
hoʻouluulu | boolean | ʻoiaʻiʻo | E noi i kahi hoʻololi fade CSS i ka toast |
huna auto | boolean | ʻoiaʻiʻo | Hūnā ʻakomi i ka ʻai |
lohi | helu | 500 |
Hoʻopaneʻe ka hūnā ʻana i ka ʻai (ms) |
Nā ʻano hana
Nā ʻano asynchronous a me nā hoʻololi
Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .
$().toast(options)
Hoʻopili i kahi mea hoʻohana meaʻai i kahi hōʻiliʻili mea.
.toast('show')
Hōʻike i kahi mea ʻai meaʻai. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka toast (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.toast
hanana). Pono ʻoe e kāhea lima i kēia ʻano hana, akā ʻaʻole e hōʻike ʻia kāu toast.
$('#element').toast('show')
.toast('hide')
Hūnā i ka ʻuala o kekahi mea. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka toast (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.toast
hanana). Pono ʻoe e kelepona lima i kēia ʻano hana inā ʻoe i hana autohide
i false
.
$('#element').toast('hide')
.toast('dispose')
Hūnā i ka ʻuala o kekahi mea. E mau ana kāu toast ma ka DOM akā ʻaʻole e hōʻike hou ʻia.
$('#element').toast('dispose')
Nā hanana
ʻAno Hanana | wehewehe |
---|---|
hōʻike.bs.toast | Hoʻomaka koke kēia hanana i ke show kāhea ʻia ʻana o ke ʻano hana. |
hōʻike ʻia.bs.toast | Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka mea hoʻohana. |
huna.bs.toast | Hoʻopau koke ʻia kēia hanana i ka wā hide i kāhea ʻia ai ke ʻano hana. |
huna.bs.toast | Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana mai ka mea hoʻohana. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})