Tosti
Nosūtiet paziņojumus saviem apmeklētājiem, izmantojot tostu, vieglu un viegli pielāgojamu brīdinājuma ziņojumu.
Tosti ir viegli paziņojumi, kas izstrādāti, lai atdarinātu pašpiegādes paziņojumus, ko popularizējušas mobilās un galddatoru operētājsistēmas. Tie ir izgatavoti ar flexbox, tāpēc tos ir viegli izlīdzināt un novietot.
Pārskats
Lietas, kas jāzina, lietojot grauzdiņu spraudni:
- Ja veidojat mūsu JavaScript no avota, tam ir nepieciešams
util.js
. - Tosti ir izvēlēti veiktspējas iemeslu dēļ, tāpēc jums tie ir jāinicializē pašam .
- Lūdzu, ņemiet vērā, ka jūs esat atbildīgs par tostu novietošanu.
- Ja nenorādīsit, grauzdiņi tiks automātiski paslēpti
autohide: false
.
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Piemēri
Pamata
Lai veicinātu pagarināmus un paredzamus grauzdiņus, iesakām galveni un pamattekstu. Toast galvenes izmanto display: flex
, kas ļauj viegli līdzināt saturu, pateicoties mūsu margin un flexbox utilītas.
Grauzdiņi ir tik elastīgi, cik nepieciešams, un tiem ir ļoti maz nepieciešamo uzcenojumu. Mēs pieprasām vismaz vienu elementu, kas satur jūsu “grauzdētu” saturu, un ļoti mudinām izmantot noraidīšanas pogu.
<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>
Tiešraide
Noklikšķiniet uz tālāk esošās pogas, lai parādītu tostu (novietots ar mūsu utilītiem apakšējā labajā stūrī), kas pēc noklusējuma ir paslēpts ar .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>
Caurspīdīgs
Grauzdiņi ir nedaudz caurspīdīgi, lai saplūstu ar to, kas atrodas zem tiem.
<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>
Sakraušana
Ja jums ir vairāki grauzdiņi, mēs pēc noklusējuma tos sakraujam vertikāli salasāmā veidā.
<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>
Izvietojums
Ievietojiet grauzdiņus, izmantojot pielāgotu CSS, kad tie jums nepieciešami. Augšējais labais stūris bieži tiek izmantots paziņojumiem, tāpat kā augšējais vidus. Ja vienlaikus rādīsit tikai vienu tostu, novietojiet pozicionēšanas stilus tieši uz .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>
Sistēmām, kas ģenerē vairāk paziņojumu, apsveriet iespēju izmantot iesaiņojuma elementu, lai tos varētu viegli sakraut.
<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>
Varat arī izmantot flexbox utilītus, lai tostu izlīdzinātu horizontāli un/vai vertikāli.
<!-- 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>
Pieejamība
Tosti ir paredzēti kā nelieli pārtraukumi jūsu apmeklētājiem vai lietotājiem, tāpēc, lai palīdzētu tiem, kam ir ekrāna lasītāji un līdzīgas palīgtehnoloģijas, tosti ir jāiekļauj aria-live
reģionā . Ekrāna lasītāji automātiski paziņo par izmaiņām aktuālajos reģionos (piemēram, grauzdiņa komponenta ievadīšana/atjaunināšana), nepārvietojot lietotāja fokusu vai citādi nepārtraucot lietotāja darbību. Turklāt iekļaujiet aria-atomic="true"
, lai nodrošinātu, ka viss grauzdiņš vienmēr tiek paziņots kā viena (atomu) vienība, nevis tikai paziņots, kas tika mainīts (kas var radīt problēmas, ja atjaunināsiet tikai daļu no grauzdiņa satura vai ja tiek rādīts tas pats grauzdiņa saturs vēlākā brīdī). Ja vajadzīgā informācija ir svarīga procesam, piemēram, veidlapas kļūdu sarakstam, izmantojiet brīdinājuma komponentugrauzdiņa vietā.
Ņemiet vērā, ka pirms grauzdiņa ģenerēšanas vai atjaunināšanas marķējumā ir jābūt iekļautam reāllaika apgabalam . Ja dinamiski ģenerējat abus vienlaikus un ievietojat tos lapā, palīgtehnoloģijas tos parasti nepaziņos.
Jums arī jāpielāgo role
un aria-live
līmenis atkarībā no satura. Ja tas ir svarīgs ziņojums, piemēram, kļūda, izmantojiet role="alert" aria-live="assertive"
, pretējā gadījumā izmantojiet role="status" aria-live="polite"
atribūtus.
Mainoties rādītajam saturam, noteikti atjauniniet delay
taimautu , lai lietotājiem būtu pietiekami daudz laika, lai izlasītu tostu.
<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>
Izmantojot autohide: false
, jums jāpievieno aizvēršanas poga, lai lietotāji varētu noraidīt tostu.
<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>
Lai gan tehniski ir iespējams jūsu grauzdiņam pievienot fokusējamas/darbības vadīklas (piemēram, papildu pogas vai saites), jums nevajadzētu to darīt, ja grauzdiņi tiek paslēpti automātiski. Pat ja grauzdiņam piešķirat ilgu delay
taimautu , tastatūras un palīgtehnoloģiju lietotājiem var būt grūti sasniegt tostu laikā, lai veiktu darbības (jo grauzdiņi netiek fokusēti, kad tie tiek parādīti). Ja jums noteikti ir nepieciešamas papildu vadības ierīces, mēs iesakām izmantot grauzdiņus ar autohide: false
.
JavaScript uzvedība
Lietošana
Inicializējiet grauzdiņus, izmantojot JavaScript:
$('.toast').toast(option)
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-
, tāpat kā data-animation=""
.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
animācija | Būla | taisnība | Lietojiet CSS izbalēšanas pāreju grauzdiņam |
automātiski paslēpt | Būla | taisnība | Automātiski paslēpiet grauzdiņus |
kavēšanās | numuru | 500 |
Grauzdiņa slēpšanas aizkave (ms) |
Metodes
Asinhronās metodes un pārejas
Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .
$().toast(options)
Elementu kolekcijai pievieno grauzdiņu apstrādātāju.
.toast('show')
Atklāj elementa grauzdiņus. Atgriežas pie zvanītāja, pirms tosts ir faktiski parādīts (ti, pirms shown.bs.toast
notikuma). Šī metode ir jāizsauc manuāli, tā vietā grauzdiņš netiks rādīts.
$('#element').toast('show')
.toast('hide')
Paslēpj elementa grauzdiņus. Atgriežas pie zvanītāja, pirms tosts faktiski ir paslēpts (ti, pirms hidden.bs.toast
notikuma). autohide
Šī metode ir jāizsauc manuāli, ja veicāt false
.
$('#element').toast('hide')
.toast('dispose')
Paslēpj elementa grauzdiņus. Jūsu grauzdiņš paliks DOM, bet vairs netiks rādīts.
$('#element').toast('dispose')
Pasākumi
Pasākuma veids | Apraksts |
---|---|
parādīt.bs.tostu | Šis notikums tiek aktivizēts nekavējoties, kad show tiek izsaukta instances metode. |
parādīts.bs.grauzdiņš | Šis notikums tiek aktivizēts, kad tosts ir padarīts redzams lietotājam. |
slēpt.bs.grauzdiņš | Šis notikums tiek aktivizēts nekavējoties, kad hide ir izsaukta instances metode. |
paslēpts.bs.grauzdiņš | Šis notikums tiek aktivizēts, kad grauzdiņš ir paslēpts no lietotāja. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})