Dagiti tosta
Iduron dagiti pakaammo kadagiti bisitam babaen ti toast, nalag-an ken nalaka a ma-customize a mensahe ti alerto.
Dagiti toast ket nalag-an a pakaammo a nadisenio a mangtulad kadagiti push notification a pinalatak dagiti mobile ken desktop operating system. Naaramid dagitoy nga addaan iti flexbox, isu a nalaka nga i-align ken iposision dagitoy.
Panangkita iti pakabuklan
Dagiti banag nga ammuen no agusar iti toast plugin:
- Dagiti toast ket opt-in gapu kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
- Automatiko nga aglemmeng dagiti toast no saanmo nga ikeddeng ti
autohide: false
.
prefers-reduced-motion
panagsaludsod ti media. Kitaen ti
benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .
Dagiti pagarigan
Kadawyan
Tapno maparegta dagiti maipalawa ken maipadto a toast, irekomendarmi ti header ken bagi. Dagiti toast headers ket agusar display: flex
, a mangipalubos ti nalaka a panagtunos ti linaon gapu kadagiti margin ken flexbox a utilidadmi.
Dagiti toast ket kasla nalaka a maibagay a kas iti kasapulam ken bassit unay ti kasapulan a markup-da. Iti kabassitan, kasapulanmi ti maymaysa nga elemento a naglaon iti “natoast” a linaonmo ken sibibileg nga iparegtami ti buton ti panangikkat.
<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>
Agbiag
I-click ti buton iti baba tapno maipakita ti toast (naiposision nga addaan kadagiti utilities-tayo iti baba a kannawan a suli) a nailemmeng babaen ti default babaen ti .hide
.
<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 hide" 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>
Translucent nga
Medio translucent dagiti toast tapno mailaok iti adda iti baba dagitoy.
<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>
Panagtumpok
Mabalinmo ti agtumpok kadagiti toast babaen ti panangbalkot kadagita iti pagkargaan iti toast, a bertikal a mangnayon iti sumagmamano nga espasyo.
<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>
Kostumbre a linaon
Ipasayaatmo dagiti toast-mo babaen ti panangikkat kadagiti sub-component, panang-tweak kadagitoy babaen kadagiti utilities , wenno babaen ti pananginayon iti bukodmo a markup. Ditoy ket nangaramidkami ti nasimsimple a toast babaen ti panangikkat ti default .toast-header
, pananginayon ti kostumbre nga ikono ti panaglemmeng manipud kadagiti Bootstrap Icons , ken panagusar ti sumagmamano a flexbox a utilidad tapno maitunos ti layout.
<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>
Saan laeng a dayta, mabalinmo met ti mangnayon kadagiti kanayonan a kontrol ken paset kadagiti toast.
<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>
Dagiti eskema ti kolor
Iti panangibangon iti pagarigan iti ngato, mabalinmo ti mangpartuat kadagiti nadumaduma nga eskema ti kolor ti toast babaen kadagiti utilidadmi iti kolor ken likudan . Ditoy nga innayonmi .bg-primary
ken .text-white
iti .toast
, ken kalpasanna innayonmi .btn-close-white
iti close button-mi. Para iti narangrang nga igid, ikkatenmi ti default a beddeng babaen ti .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>
Panagplastar
Ikabil dagiti toast nga addaan iti custom CSS kas kasapulam dagitoy. Masansan a mausar ti ngato a kannawan para kadagiti pakaammo, kasta met ti makinngato a tengnga. No maysa laeng a toast ti ipakitam iti tunggal gundaway, ikabilmo a mismo dagiti estilo ti panangiposision iti .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>
Para kadagiti sistema a mangpataud kadagiti ad-adu a pakaammo, ibilang ti panagusar ti elemento ti panagbalkot tapno nalaka a makatumpokda.
<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>
Mabalinmo pay ti makagun-od iti magarbo kadagiti flexbox utilities tapno maitunos dagiti toast iti horizontal ken/wenno bertikal.
<!-- 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>
Ti pannakagun-od
Nairanta dagiti toast a babassit a pannakasinga dagiti bisita wenno agus-usar kenka, isu a tapno matulongam dagidiay addaan kadagiti screen reader ken umasping a makatulong a teknolohia, rumbeng a balutem dagiti toast-mo iti maysa a aria-live
rehion . Dagiti panagbalbaliw kadagiti sibibiag a rehion (kas ti panangi-inject/panagpabaro ti maysa a paset ti toast) ket automatiko a maipakaammo babaen dagiti agbasbasa ti iskrin a saan a kasapulan a mangyakar ti pokus ti agar-aramat wenno iti sabali a wagas ket mangsinga ti agar-aramat. Mainayon pay, iraman aria-atomic="true"
tapno masigurado a kanayon a maipakaammo ti intero a toast kas maymaysa (atomiko) a yunit, imbes nga ipakaammo laeng no ania ti nabaliwan (a mabalin nga agtungpal kadagiti parikut no i-update laeng ti paset ti linaon ti toast, wenno no mangipakpakita iti isu met laeng a linaon ti toast iti naud-udi a punto ti panawen). No ti impormasion a kasapulan ket napateg para iti proseso, kas pagarigan para iti listaan dagiti biddut iti maysa a porma, kalpasanna usaren ti paset ti alertoimbes a toast.
Imutektekanyo a kasapulan nga adda ti live region iti markup sakbay a mapataud wenno ma-update ti toast. No dinamiko a mangpataudka nga agpada iti aggigiddan ken mangi-inject kadagitoy iti panid, dagitoy ket sapasap a saan a maipakaammo babaen dagiti makatulong a teknolohia.
Masapul met nga ibagaymo ti role
ken aria-live
level depende iti linaonna. No daytoy ket napateg a mensahe a kas ti biddut, usaren ti role="alert" aria-live="assertive"
, no saan ket agusar kadagiti role="status" aria-live="polite"
attribute.
Bayat nga agbaliwbaliw ti linaon nga ipakpakitam, siguraduem nga i-update ti delay
timeout tapno adda umdas a tiempo dagiti agus-usar a mangbasa iti toast.
<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>
No usarem ti autohide: false
, masapul nga inayonmo ti close button tapno mapalubosan dagiti agus-usar a mangilaksid iti toast.
<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>
Bayat a teknikal ket mabalin a manginayon kadagiti maipamaysa/maaramid a kontrol (kas kadagiti kanayonan a buton wenno silpo) iti toast-mo, rumbeng a liklikam nga aramiden daytoy para kadagiti autohiding a toast. Uray no ikkam ti toast iti napaut a delay
timeout , mabalin a marigatan dagiti agus-usar iti teklado ken makatulong a teknolohia a makadanon iti toast iti umiso a tiempo tapno agtignayda (yantangay dagiti toast ket saan nga umawat iti pokus no maiparang dagitoy). No talaga a masapul nga addaanka iti kanayonan a panangkontrol, irekomendarmi ti panangusar iti toast nga addaan iti autohide: false
.
Sass nga
Dagiti Variable
$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(0, 0, 0, .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(0, 0, 0, .05);
Panagusar
Irugi dagiti tosta babaen ti JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Dagiti Pagpilian
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-
, a kas iti data-bs-animation=""
.
Nagan | Tipo | Default | Panangiladawan |
---|---|---|---|
animation |
boolean nga | true |
Iyaplikar ti CSS fade transition iti toast |
autohide |
boolean nga | true |
Auto ilemmeng ti toast |
delay |
bilang | 5000 |
Itantan ti panangilemmeng iti tosta (ms) . |
Dagiti Pamay-an
Dagiti asynchronous a pamay-an ken panagbalbaliw
Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .
Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .
ipakita
Ipalgakna ti toast ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti toast (kayatna a sawen sakbay a shown.bs.toast
mapasamak ti pasamak). Masapul a manual nga awagam daytoy a pamay-an, imbes ketdi saan nga agparang ti toast-mo.
toast.show()
aglemmeng
Ilemmengna ti toast ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti toast (kayatna a sawen sakbay a hidden.bs.toast
mapasamak ti pasamak). Masapul a manual nga awagan daytoy a pamay-an no inaramidmo autohide
iti false
.
toast.hide()
ibelleng
Ilemmengna ti toast ti maysa nga elemento. Agtalinaed ti toast mo iti DOM ngem saanen nga agparang.
toast.dispose()
makaala tiInstansia
Estatiko a pamay-an a mangipalubos kenka a makaala ti scrollspy nga instansia a nainaig iti maysa nga elemento ti DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
makaalaWennoAgaramid itiInstansia
Estatiko a pamay-an a mangipalubos kenka a makaala ti scrollspy a pagarigan a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Dagiti Pasamak
Kita ti pasamak | Panangiladawan |
---|---|
show.bs.toast |
Daytoy a pasamak ket agputok a dagus no ti show pamay-an ti pagarigan ket maawagan. |
shown.bs.toast |
Daytoy a pasamak ket mapaputok no ti toast ket naaramiden a makita ti agus-usar. |
hide.bs.toast |
Daytoy a pasamak ket dagus a mapaputok no ti hide pamay-an ti pagarigan ket naawagan. |
hidden.bs.toast |
Daytoy a pasamak ket mapaputok no ti toast ket nalpas a nailemmeng manipud iti agar-aramat. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})