Toast ahorow a wɔde yɛ aduan
Pia amanneɛbɔ ahorow kɔ wo nsrahwɛfo nkyɛn denam toast, kɔkɔbɔ nkrasɛm a emu yɛ hare na ɛnyɛ den sɛ wobɛsesa so.
Toasts yɛ amanneɛbɔ a emu yɛ hare a wɔayɛ sɛ ɛbɛsuasua push notifications a mobile ne desktop dwumadi nhyehyɛe ahorow ama agye din no. Wɔde flexbox na ɛyɛe, enti ɛnyɛ den sɛ wobɛhyehyɛ no pɛpɛɛpɛ na wode asi hɔ.
Nsɛm a Wɔaka abom
Nneɛma a ɛsɛ sɛ wuhu bere a wode toast plugin no redi dwuma no:
- Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛ
util.js
. - Toasts yɛ opt-in esiane adwumayɛ nti, enti ɛsɛ sɛ w’ankasa wufi ase .
- Yɛsrɛ sɛ hyɛ no nsow sɛ w’asɛyɛde sɛ wode toast ahorow no si baabi.
- Toasts bɛhintaw ne ho sɛ woankyerɛ a
autohide: false
.
prefers-reduced-motion
media asɛmmisa no so. Hwɛ
yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .
Nhwɛso ahorow
Mfiasesɛm
Sɛnea ɛbɛyɛ a wɔbɛhyɛ toast ahorow a wotumi trɛw mu na wotumi hyɛ ho nkɔm ho nkuran no, yɛkamfo atiri ne nipadua kyerɛ. Toast headers use display: flex
, ma kwan ma ɛyɛ mmerɛw sɛ wobɛhyehyɛ nsɛm no esiane yɛn margin ne flexbox utilities nti.
Toasts yɛ nea ɛyɛ mmerɛw sɛnea wuhia na enni markup kakraa bi pɛ a wɔhwehwɛ. Anyɛ yiye koraa no, yɛhwehwɛ element biako a ɛbɛma wo “toasted” nsɛm no ahyɛ mu na yɛhyɛ dismiss button ho nkuran denneennen.
<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>
Te ase
Klik bɔtn a ɛwɔ ase hɔ no so na kyerɛ toast (a wɔde yɛn utilities no asi hɔ wɔ ase nifa so) a wɔde asie default so denam .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>
Translucent a ɛyɛ hann
Toasts yɛ translucent kakra ma ɛne nea ɛwɔ ase no afra.
<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>
Nneɛma a wɔde boaboa ano
Sɛ wowɔ toasts pii a, yɛde default yɛ vertically stacking wɔn wɔ ɔkwan a wotumi kenkan so.
<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>
Nneɛma a wɔde bɛto hɔ
Fa toasts a CSS a wɔahyɛ da ayɛ no to hɔ sɛnea wuhia no. Wɔtaa de atifi nifa no di dwuma de bɔ amanneɛ, te sɛ nea ɛwɔ soro mfinimfini no. Sɛ wobɛkyerɛ toast biako pɛ wɔ bere koro mu a, fa gyinabea ahorow no hyɛ .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>
Wɔ nhyehyɛe ahorow a ɛma amanneɛbɔ pii ba no, susuw ho sɛ wode wrapping element bedi dwuma sɛnea ɛbɛyɛ a wobetumi ayɛ mmerɛw sɛ wɔbɛboaboa ano.
<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>
Wubetumi nso anya fancy ne flexbox utilities de align toasts horizontally ne/anaasɛ vertically.
<!-- 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>
Nneɛma a wotumi nya
Wɔayɛ toasts sɛ ɛbɛyɛ nneɛma nketenkete a ɛbɛtwa wo nsrahwɛfo anaa wɔn a wɔde di dwuma no mu, enti sɛnea ɛbɛyɛ a wobɛboa wɔn a wɔwɔ screen reader ne mfiridwuma a ɛte saa a ɛboa no, ɛsɛ sɛ wode wo toasts no kyekyere aria-live
ɔmantam bi mu . Nsakrae a ɛba wɔ mmeae a ɛte ase (te sɛ toast fã bi a wɔde gu mu/wɔyɛ no foforo) no, screen akenkanfo de wɔn ho to gua a enhia sɛ wɔde nea ɔde di dwuma no adwene si biribi so anaasɛ wɔde ɔkwan foforo so twa nea ɔde di dwuma no mu. Bio nso, ka ho aria-atomic="true"
sɛ wobɛhwɛ ahu sɛ wɔde toast no nyinaa bɛto gua bere nyinaa sɛ ade biako (atomic), sen sɛ wobɛbɔ nea wɔasesa no ho amanneɛ kɛkɛ (a ebetumi de ɔhaw ahorow aba sɛ woyɛ toast no mu nsɛm no fã bi nkutoo foforo, anaasɛ sɛ woda toast no mu nsɛm koro no ara adi a wɔ bere bi akyi). Sɛ nsɛm a ehia no ho hia ma adeyɛ no, s.e., mfomso ahorow a wɔahyehyɛ wɔ kratasin bi mu a, ɛnde fa kɔkɔbɔ fã no di dwumammom sen sɛ wɔde toast bɛyɛ.
Hyɛ no nsow sɛ ɛsɛ sɛ live region no wɔ markup no mu ansa na wɔayɛ toast no anaasɛ wɔayɛ no foforo. Sɛ wode ahoɔden yɛ abien no nyinaa bere koro mu na wode gu kratafa no mu a, mpɛn pii no wɔremfa mfiridwuma a ɛboa mmɔ amanneɛ.
Ɛsɛ sɛ wosakra role
ne aria-live
level no nso gyina emu nsɛm no so. Sɛ ɛyɛ nkrasɛm a ɛho hia te sɛ mfomso a, fa role="alert" aria-live="assertive"
, anyɛ saa a fa role="status" aria-live="polite"
su ahorow di dwuma.
Bere a nneɛma a worekyerɛ no sesa no, hwɛ hu sɛ wobɛma delay
bere a wɔde ayɛ adwuma no ayɛ foforo sɛnea ɛbɛyɛ a wɔn a wɔde di dwuma no benya bere a ɛdɔɔso a wɔde bɛkenkan toast no.
<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>
Sɛ wode redi dwuma autohide: false
a, ɛsɛ sɛ wode close button bi ka ho na ama wɔn a wɔde di dwuma no atumi agyae toast no.
<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>
Bere a mfiridwuma mu no ɛyɛ yiye sɛ wode focusable/actionable controls (te sɛ buttons anaa links foforo) bɛka wo toast no ho no, ɛsɛ sɛ wokwati sɛ wobɛyɛ eyi ama autohiding toasts. Sɛ mpo woma toast no bere tenten , delay
keyboard ne mmoa mfiridwuma a wɔde di dwuma no betumi ayɛ den sɛ wobedu toast no ho bere ano de ayɛ ho biribi (esiane sɛ toast ahorow no nnya adwene bere a wɔda no adi no). Sɛ ɛsɛ sɛ wunya nneɛma foforo a wode bedi so koraa a, yɛhyɛ nyansa sɛ fa toast a autohide: false
.
JavaScript nneyɛe
Sɛnea wɔde di dwuma
Fa JavaScript so hyɛ toast ahorow ase:
$('.toast').toast(option)
Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-
, sɛnea ɛwɔ data-animation=""
.
Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
---|---|---|---|
animation a wɔde yɛ nneɛma | boolean ho asɛm | nokorɛ | Fa CSS fade nsakrae bi di dwuma wɔ toast no so |
autohide | boolean ho asɛm | nokorɛ | Auto sie toast no |
ka akyi | nɔma | 500 |
Twentwɛn toast no a wode besie no ase (ms) . |
Akwan a wɔfa so yɛ
Asynchronous akwan ne nsakrae ahorow
API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .
$().toast(options)
Fa toast handler bata element ahorow a wɔaboaboa ano ho.
.toast('show')
Ɛda element bi toast adi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ toast no ankasa (kyerɛ sɛ ansa na shown.bs.toast
asɛm no asi). Ɛsɛ sɛ wode nsa frɛ saa kwan yi, mmom wo toast no renkyerɛ.
$('#element').toast('show')
.toast('hide')
Ɛde element bi toast sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde toast no asie ankasa (kyerɛ sɛ ansa na hidden.bs.toast
asɛm no asi). Ɛsɛ sɛ wode nsa frɛ saa kwan yi sɛ woyɛɛ autohide
sɛ false
.
$('#element').toast('hide')
.toast('dispose')
Ɛde element bi toast sie. Wo toast no bɛtena DOM no so nanso ɛrenkyerɛ bio.
$('#element').toast('dispose')
Nsɛm a esisi
Nsɛm a Ɛsisii no Su | Nkyerɛmu |
---|---|
kyerɛ.bs.toast | Saa adeyɛ yi tow ntɛm ara bere a show wɔfrɛ instance kwan no. |
wɔakyerɛ.bs.toast | Wɔtow saa adeyɛ yi bere a wɔama nea ɔde di dwuma no ahu toast no. |
hide.bs.toast a wɔde hyɛ mu | Wɔtow saa adeyɛ yi ntɛm ara bere a hide wɔafrɛ instance kwan no. |
ahintaw.bs.toast | Wɔtow saa adeyɛ yi bere a wɔde toast no asie nea ɔde di dwuma no awie no. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})