Toasts
Pouse notifikasyon bay vizitè ou yo ak yon pen griye, yon mesaj alèt ki lejè ak fasil personnalisable.
Toasts yo se notifikasyon ki lejè ki fèt pou imite notifikasyon pouse ki te popilarize pa sistèm operasyon mobil ak Desktop. Yo bati ak flexbox, kidonk yo fasil pou aliman ak pozisyon.
Apèsi sou lekòl la
Bagay ou dwe konnen lè w ap itilize plugin pen griye:
- Toasts yo patisipe pou rezon pèfòmans, kidonk ou dwe inisyalize yo tèt ou .
- Toasts ap kache otomatikman si ou pa presize
autohide: false
.
prefers-reduced-motion
rechèch medya yo. Gade
seksyon mouvman redui nan dokiman aksè nou an .
Egzanp yo
Debaz
Pou ankouraje pen griye extensible ak previzib, nou rekòmande yon header ak kò. Tèt pen griye itilize display: flex
, sa ki pèmèt aliyman fasil nan kontni gras a maj nou yo ak sèvis piblik flexbox.
Toasts yo fleksib jan ou bezwen epi yo gen yon ti kras maketing obligatwa. Omwen, nou mande pou yon sèl eleman ki genyen kontni "griye" ou epi ankouraje fòtman yon bouton anile.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
.hide
klas la pou kache nèt yon pen griye (ak
display:none
, olye ke jis ak
opacity:0
). Sa a se kounye a pa nesesè ankò. Sepandan, pou konpatibilite bak, script nou an ap kontinye aktive klas la (menm si pa gen okenn bezwen pratik pou li) jouk pwochen vèsyon pi gwo a.
Egzanp viv
Klike sou bouton ki anba a pou montre yon pen griye (ki pozisyone ak sèvis piblik nou yo nan kwen ki pi ba dwat) ki te kache pa default.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Nou itilize JavaScript sa a pou deklanche demo pen griye nou an:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
Translusid
Toasts yo yon ti kras translusid melanje nan ak sa ki anba yo.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Anpile
Ou ka pile pen griye pa vlope yo nan yon veso pen griye, ki pral vètikal ajoute kèk espas.
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
Kontni Custom
Pèsonalize pen griye ou lè w retire sub-konpozan, ajiste yo ak sèvis piblik , oswa lè w ajoute pwòp mak ou. Isit la nou te kreye yon pen griye ki pi senp lè nou retire default la .toast-header
, ajoute yon ikòn kache koutim nan Bootstrap Icons , epi itilize kèk sèvis piblik flexbox pou ajiste layout la.
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
Altènativman, ou kapab tou ajoute kontwòl adisyonèl ak konpozan nan toasts.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
Koulè rapid
Bati sou egzanp ki anwo a, ou ka kreye diferan koulè pen griye ak sèvis piblik koulè ak background nou yo . Isit la nou te ajoute .bg-primary
ak .text-white
nan .toast
, ak Lè sa a, ajoute .btn-close-white
nan bouton fèmen nou an. Pou yon kwen klè, nou retire fwontyè default la ak .border-0
.
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
Plasman
Mete pen griye ak CSS koutim jan ou bezwen yo. Anwo dwat la souvan itilize pou notifikasyon, menm jan ak mitan an tèt. Si w ap montre sèlman yon pen griye nan yon moman, mete estil pozisyon yo dwat sou .toast
.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
Pou sistèm ki jenere plis notifikasyon, konsidere itilize yon eleman anbalaj pou yo ka fasilman pile.
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.p-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
Ou ka jwenn anpenpan tou ak sèvis piblik flexbox pou fè aliman pen griye orizontal ak / oswa vètikal.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Aksesiblite
Toasts yo gen entansyon fè ti entèripsyon pou vizitè ou oswa itilizatè yo, kidonk pou ede moun ki gen lektè ekran ak teknoloji asistans ki sanble, ou ta dwe vlope pen griye ou nan yon aria-live
rejyon . Chanjman nan rejyon viv (tankou enjekte / ajou yon eleman pen griye) otomatikman anonse pa lektè ekran san yo pa bezwen deplase konsantre itilizatè a oswa otreman entèwonp itilizatè a. Anplis de sa, enkli aria-atomic="true"
asire ke tout pen griye a toujou anonse kòm yon sèl inite (atomik), olye ke jis anonse sa ki te chanje (ki ta ka mennen nan pwoblèm si ou sèlman mete ajou yon pati nan kontni pen griye a, oswa si montre menm kontni pen griye a. nan yon moman pita nan tan). Si enfòmasyon ki nesesè yo enpòtan pou pwosesis la, pa egzanp pou yon lis erè nan yon fòm, Lè sa a, sèvi ak eleman alèt la .olye pou yo pen griye.
Remake byen ke rejyon an ap viv la bezwen prezan nan maketing la anvan pen griye a te pwodwi oswa mete ajou. Si ou dinamik jenere tou de an menm tan epi enjekte yo nan paj la, jeneralman yo pa pral anonse pa teknoloji asistans.
Ou bezwen tou adapte a role
ak aria-live
nivo depann sou kontni an. Si se yon mesaj enpòtan tankou yon erè, sèvi ak role="alert" aria-live="assertive"
, otreman sèvi ak role="status" aria-live="polite"
atribi.
Kòm kontni w ap montre a chanje, asire w ke ou mete ajou tan an delay
pou itilizatè yo gen ase tan pou li pen griye a.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
Lè w ap itilize autohide: false
, ou dwe ajoute yon bouton fèmen pou pèmèt itilizatè yo ranvwaye pen griye a.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Pandan ke teknikman li posib pou ajoute kontwòl konsantre/aksyone (tankou bouton adisyonèl oswa lyen) nan pen griye ou a, ou ta dwe evite fè sa pou otokache pen griye. Menm si ou bay pen griye a yon tan long delay
, itilizatè klavye ak teknoloji asistans yo ka jwenn li difisil pou rive nan pen griye a alè pou yo pran aksyon (piske pen griye pa resevwa konsantre lè yo parèt). Si w absoliman dwe gen plis kontwòl, nou rekòmande pou w sèvi ak yon pen griye ak autohide: false
.
Sass
Varyab
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba($black, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba($black, .05);
Itilizasyon
Inisyalize toasts via JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Deklanche
Yo ka fè ranvwa a ak data
atribi ki sou yon bouton nan pen griye a jan yo montre pi ba a:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
oswa sou yon bouton deyò pen griye a lè l sèvi avèk data-bs-target
jan yo montre anba a:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
Opsyon
Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-
, tankou nan data-bs-animation=""
.
Non | Kalite | Default | Deskripsyon |
---|---|---|---|
animation |
booleyen | true |
Aplike yon tranzisyon CSS fennen sou pen griye a |
autohide |
booleyen | true |
Oto kache pen griye a |
delay |
nimewo | 5000 |
Reta kache pen griye a (ms) |
Metòd
Metòd asynchrone ak tranzisyon
Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .
montre
Revele pen griye yon eleman. Retounen bay moun k ap rele a anvan yo te montre pen griye a (sa vle di anvan shown.bs.toast
evènman an rive). Ou gen manyèlman rele metòd sa a, olye pen griye ou a pa pral montre.
toast.show()
kache
Kache pen griye yon eleman. Retounen bay moun kap rele a anvan pen griye a te kache (sa vle di anvan hidden.bs.toast
evènman an rive). Ou dwe manyèlman rele metòd sa a si ou te fè autohide
nan false
.
toast.hide()
jete
Kache pen griye yon eleman. Pen grye ou a ap rete sou DOM la men li p ap parèt ankò.
toast.dispose()
getInstance
Metòd estatik ki pèmèt ou jwenn egzanp pen griye ki asosye ak yon eleman DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
Metòd estatik ki pèmèt ou jwenn egzanp pen griye ki asosye ak yon eleman DOM, oswa kreye yon nouvo nan ka li pa te inisyalize.
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Evènman
Kalite evènman | Deskripsyon |
---|---|
show.bs.toast |
Evènman sa a dife imedyatman lè yo show rele metòd egzanp lan. |
shown.bs.toast |
Evènman sa a revoke lè pen griye a te vin vizib pou itilizatè a. |
hide.bs.toast |
Evènman sa a te tire imedyatman lè yo hide te rele metòd egzanp lan. |
hidden.bs.toast |
Evènman sa a revoke lè pen griye a fini kache pou itilizatè a. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})