Mga toast
Iduso ang mga pahibalo sa imong mga bisita gamit ang usa ka toast, usa ka gaan ug dali nga mapasibo nga mensahe sa alerto.
Ang mga toast kay gaan nga mga abiso nga gidesinyo sa pagsundog sa mga abiso sa pagduso nga gipasikat sa mga operating system sa mobile ug desktop. Gitukod sila gamit ang flexbox, mao nga dali kini nga i-align ug posisyon.
Overview
Mga butang nga mahibal-an kung gamiton ang toast plugin:
- Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kini
util.js
. - Ang mga toast gi-opt-in tungod sa mga hinungdan sa performance, mao nga ikaw mismo ang mag-initialize niini .
- Palihug timan-i nga ikaw ang responsable sa pagpahimutang sa mga toast.
- Awtomatikong itago ang mga toast kung dili nimo isulti
autohide: false
.
prefers-reduced-motion
pangutana sa media. Tan-awa ang
gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .
Mga pananglitan
sukaranan
Aron madasig ang mapalapad ug matag-an nga mga toast, among girekomenda ang usa ka header ug lawas. Ang mga ulohan sa toast gigamit display: flex
, nga nagtugot sa dali nga pag-align sa sulud salamat sa among margin ug flexbox nga mga gamit.
Ang mga toast kay flexible sama sa imong gikinahanglan ug gamay ra kaayo ang gikinahanglang markup. Sa labing gamay, nanginahanglan kami usa ka elemento nga adunay sulud sa imong "toasted" nga sulud ug kusganon nga gidasig ang usa ka butones nga i-dismiss.
<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>
Mabuhi
I-klik ang buton sa ubos aron ipakita ang usa ka toast (nabutang sa among mga utilities sa ubos nga tuo nga suok) nga gitago sa default gamit ang .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
Ang mga toast medyo translucent aron masagol sa kung unsa ang naa sa ubos niini.
<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>
Pagtapok
Kung adunay ka daghang mga toast, default namon ang pag-stack nga patayo sa kini nga mabasa nga paagi.
<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>
Pagpahimutang
Ibutang ang mga toast nga adunay naandan nga CSS kung kinahanglan nimo kini. Ang taas nga tuo kanunay nga gigamit alang sa mga pahibalo, sama sa taas nga tunga. Kung magpakita ka lang ug usa ka toast matag higayon, ibutang ang mga istilo sa pagpoposisyon diha mismo sa .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>
Para sa mga sistema nga makamugna og dugang nga mga abiso, ikonsiderar ang paggamit sa usa ka elemento sa pagputos aron dali silang ma-stack.
<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>
Mahimo ka usab nga madani sa mga gamit sa flexbox aron i-align ang mga toast nga pinahigda ug / o patindog.
<!-- 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>
Accessibility
Ang mga toast gituyo aron mahimong gamay nga paghunong sa imong mga bisita o tiggamit, busa aron matabangan kadtong adunay mga screen reader ug parehas nga mga teknolohiya sa pagtabang, kinahanglan nimo nga ibalot ang imong mga toast sa usa ka aria-live
rehiyon . Ang mga pagbag-o sa mga buhi nga rehiyon (sama sa pag-inject/pag-update sa usa ka bahin sa toast) awtomatik nga gipahibalo sa mga magbabasa sa screen nga dili kinahanglan nga ibalhin ang pokus sa gumagamit o kung dili makabalda sa tiggamit. Dugang pa, ilakip aria-atomic="true"
aron masiguro nga ang tibuok nga toast kanunay nga gipahibalo isip usa ka (atomic) nga yunit, imbes nga ipahibalo lang kung unsa ang nabag-o (nga mahimong mosangpot sa mga problema kung imong i-update ang bahin sa sulod sa toast, o kung magpakita sa samang sulod sa toast. sa ulahi nga punto sa panahon). Kung ang impormasyon nga gikinahanglan importante alang sa proseso, pananglitan sa listahan sa mga sayop sa usa ka porma, unya gamita ang alert componentimbes nga toast.
Timan-i nga ang buhi nga rehiyon kinahanglan nga anaa sa markup sa dili pa ang toast namugna o updated. Kung dinamikong imong gimugna ang duha sa parehas nga oras ug gi-inject kini sa panid, kasagaran dili kini ipahibalo sa mga teknolohiya nga makatabang.
Kinahanglan usab nimo nga ipahiangay ang role
ug aria-live
lebel depende sa sulud. Kung kini usa ka hinungdanon nga mensahe sama sa usa ka sayup, gamita ang role="alert" aria-live="assertive"
, kung dili gamita ang role="status" aria-live="polite"
mga hiyas.
Samtang nagbag-o ang sulud nga imong gipakita, siguruha nga i-update ang delay
timeout aron adunay igong oras ang mga tiggamit sa pagbasa sa 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>
Kung gigamit ang autohide: false
, kinahanglan nimong idugang ang usa ka close button aron tugutan ang mga tiggamit nga isalikway ang 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>
Bisan tuod sa teknikal nga paagi posible nga makadugang sa focusable/actionable controls (sama sa dugang nga mga buton o link) sa imong toast, kinahanglan nimong likayan ang pagbuhat niini para sa autohiding toasts. Bisan kung hatagan nimo ang toast ug taas nga delay
timeout , ang mga tiggamit sa keyboard ug assistive nga teknolohiya mahimong maglisud sa pagkab-ot sa toast sa oras aron molihok (tungod kay ang mga toast dili makadawat pokus kung kini gipakita). Kung kinahanglan nimo nga adunay dugang nga mga kontrol, among girekomenda ang paggamit sa usa ka toast nga adunay autohide: false
.
Panggawi sa JavaScript
Paggamit
Pagsugod sa mga toast pinaagi sa JavaScript:
$('.toast').toast(option)
Mga kapilian
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-animation=""
.
Ngalan | Matang | Default | Deskripsyon |
---|---|---|---|
animation | boolean | tinuod | Ibutang ang CSS fade transition sa toast |
autotago | boolean | tinuod | Awtomatikong itago ang toast |
paglangan | numero | 500 |
Paglangan sa pagtago sa toast (ms) |
Pamaagi
Asynchronous nga mga pamaagi ug transisyon
Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .
Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .
$().toast(options)
Naglakip sa tigdumala sa toast sa usa ka koleksyon sa elemento.
.toast('show')
Nagpadayag sa toast sa usa ka elemento. Mibalik sa nanawag sa wala pa ang toast gipakita (ie sa wala pa shown.bs.toast
mahitabo ang panghitabo). Kinahanglan nimo nga mano-mano nga tawagan kini nga pamaagi, sa baylo ang imong toast dili magpakita.
$('#element').toast('show')
.toast('hide')
Nagtago sa toast sa usa ka elemento. Mibalik sa nanawag sa wala pa ang toast natago (ie sa wala pa hidden.bs.toast
mahitabo ang panghitabo). Kinahanglan nimo nga mano-mano nga tawagan kini nga pamaagi kung gihimo nimo autohide
ang false
.
$('#element').toast('hide')
.toast('dispose')
Nagtago sa toast sa usa ka elemento. Ang imong toast magpabilin sa DOM apan dili na magpakita.
$('#element').toast('dispose')
Mga panghitabo
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.toast | Kini nga panghitabo nagdilaab dayon kung ang show pamaagi sa pananglitan gitawag. |
gipakita.bs.toast | Kini nga panghitabo gipabuto kung ang toast nahimo nga makita sa tiggamit. |
itago.bs.toast | Kini nga panghitabo gipabuto dayon kung ang hide pamaagi sa pananglitan gitawag na. |
tinago.bs.toast | Kini nga panghitabo gipabuto kung ang toast nahuman na sa pagtago gikan sa tiggamit. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})