Toasts
Push zviziviso kune vashanyi vako ine toast, yakareruka uye inogoneka nyore yambiro meseji.
Toasts zviziviso zvakareruka zvakagadzirirwa kutevedzera zviziviso zvepush izvo zvakafarirwa nenharembozha uye desktop inoshanda masisitimu. Iwo akavakwa neflexbox, saka ari nyore kurongedza uye chinzvimbo.
Overview
Zvinhu zvekuziva kana uchishandisa toast plugin:
- Toasts inosarudza-kupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
- Toasts inongozvivanza kana ukasatsanangura
autohide: false
.
prefers-reduced-motion
nemubvunzo wenhau. Ona chikamu
chakaderedzwa chezvinyorwa zvedu zvekusvikika .
Mienzaniso
Basic
Kuti tikurudzire kuwedzera uye kufungidzira toasts, tinokurudzira musoro uye muviri. Toast misoro inoshandisa display: flex
, ichibvumira kurongedza zviri nyore zvemukati nekuda kwemargin uye flexbox zvishandiso.
Toasts anochinjika sezvaunoda uye ane mashoma anodiwa markup. Zvirinani, isu tinoda chinhu chimwe chete kuti chive nezvako "zvakaomeswa" uye kukurudzira zvakasimba bhatani rekudzinga.
<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
kirasi kuti ivanze zvachose toast (ne
display:none
, pane kungova ne
opacity:0
). Izvi hazvichadiwi zvakare. Nekudaro, kuitira kuenderana kumashure, script yedu icharamba ichishandura kirasi (kunyangwe pasina iyo inoshanda kudikanwa kwayo) kusvika iyo inotevera vhezheni huru.
Rarama muenzaniso
Dzvanya bhatani riri pazasi kuratidza toast (yakamisikidzwa nezvishandiso zvedu mukona yekurudyi) iyo yakavanzwa nekusarudzika.
<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>
Isu tinoshandisa inotevera JavaScript kukonzeresa yedu mhenyu toast demo:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
Translucent
Toasts anopenya zvishoma kuti asanganise nezviri pazasi pawo.
<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>
Stacking
Iwe unogona kurongedza toast nekuzviputira mumudziyo wekuputira, izvo zvinozowedzera kuwedzera imwe nzvimbo.
<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>
Custom content
Gadzirisa ma toast ako nekubvisa madiki-zvikamu, uchiabatanidza nezvishandiso , kana nekuwedzera yako markup. Pano takagadzira toast yakapfava nekubvisa iyo yakasarudzika .toast-header
, tichiwedzera tsika yekuvanza icon kubva kuBootstrap Icons , uye kushandisa zvimwe flexbox utilities kugadzirisa marongero.
<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>
Neimwe nzira, iwe unogona zvakare kuwedzera mamwe ekudzora uye zvikamu kune 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>
Zvirongwa zvemavara
Kuvaka pamuenzaniso wepamusoro, iwe unogona kugadzira akasiyana toast color zvirongwa neruvara rwedu uye zvemashure zvinoshandiswa. Pano tawedzera .bg-primary
uye .text-white
kune iyo .toast
, uye towedzera .btn-close-white
kune yedu yekuvhara bhatani. Kune crisp mupendero, tinobvisa muganho wakasarudzika ne .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>
Placement
Isa ma toast ane tsika CSS sezvaunoda iwo. Kurudyi kwepamusoro kunowanzo shandiswa pazviziviso, sezvakaita wepakati wepamusoro. Kana uchizongoratidza tositi imwe panguva, isa zvitaera zvekumisikidza ipapo pa .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>
Kune masisitimu anogadzira zviziviso zvakawanda, funga kushandisa chinhu chekuputira kuti zvigone kurongedza zviri nyore.
<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>
Iwe unogona zvakare kuwana fancy neflexbox utilities kuti uenzanise toasts yakatwasuka uye/kana yakatwasuka.
<!-- 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>
Accessibility
Toasts inoitirwa kuve kukanganisa kudiki kune vashanyi vako kana vashandisi, saka kubatsira avo vane skrini yekuverenga uye yakafanana tekinoroji yekubatsira, unofanirwa kuputira ma toast ako aria-live
munharaunda . Shanduko kumatunhu anogara (sekubaya jekiseni / kuvandudza chikamu chetositi) anoziviswa otomatiki nevaverengi vescreen pasina chikonzero chekufambisa chinotariswa nemushandisi kana kukanganisa mushandisi. Pamusoro pezvo, sanganisira aria-atomic="true"
kuve nechokwadi chekuti toast yese inogara ichiziviswa sechinhu chimwe chete (atomic) unit, pane kungozivisa zvakachinjwa (izvo zvinogona kuunza matambudziko kana iwe ukangovandudza chikamu cheiyo toast yemukati, kana kuratidza yakafanana munguva inotevera). Kana ruzivo rwuri kudiwa rwakakosha pakuita, semuenzaniso kune rondedzero yezvikanganiso mufomu, zvino shandisa chikamu chekuzivisa .panzvimbo yetoast.
Ziva kuti nharaunda mhenyu inoda kuvepo mumarkup isati yagadzirwa kana kuvandudzwa. Kana iwe ukagadzira zvese zviri zviviri panguva imwe chete uye wozvipinza mupeji, hazviwanzo kuziviswa neanobatsira matekinoroji.
Iwe zvakare unofanirwa kugadzirisa iyo role
uye aria-live
nhanho zvichienderana nezviri mukati. Kana iri meseji yakakosha senge kukanganisa, shandisa role="alert" aria-live="assertive"
, kana zvisina kudaro shandisa role="status" aria-live="polite"
hunhu.
Sezvo zvirimo zvauri kuratidza zvachinja, ita chokwadi chekugadzirisa delay
nguva yekubuda kuitira kuti vashandisi vawane nguva yakakwana yekuverenga 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>
Paunenge uchishandisa autohide: false
, iwe unofanirwa kuwedzera bhatani rekuvhara kuti ubvumire vashandisi kudzinga 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>
Nepo tekinoroji zvichikwanisika kuwedzera zvinotariswa/zvinoita zvidzoreso (zvakadai semamwe mabhatani kana zvinongedzo) mune yako toast, iwe unofanirwa kudzivirira kuita izvi kune autohiding toasts. Kunyangwe iwe ukapa toast nguva yakareba delay
, vashandisi vekhibhodi uye yekubatsira tekinoroji vangaomerwa nekusvika kune toast nenguva kutora chiito (sezvo toast isingagamuchire kutarisa kana ichiratidzwa). Kana iwe uchifanirwa kuve nekumwe kutonga, tinokurudzira kushandisa toast ine autohide: false
.
Sass
Variables
$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);
Usage
Tanga toasts kuburikidza neJavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Zvikonzero
Kudzingwa kunogona kuwanikwa data
nehunhu huri pabhatani mukati metoast sezvakaratidzwa pazasi:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
kana pabhatani riri kunze kwetositi uchishandisa data-bs-target
sezvaratidzwa pazasi:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
Options
Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-
, semu data-bs-animation=""
.
Zita | Type | Default | Tsanangudzo |
---|---|---|---|
animation |
boolean | true |
Isa CSS fade shanduko kune toast |
autohide |
boolean | true |
Auto viga toast |
delay |
nhamba | 5000 |
Kunonoka kuvanza toast (ms) |
Nzira
Asynchronous nzira uye shanduko
Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .
show
Inoratidza toast yechinhu. Inodzokera kumunhu anodaidzira isati yanyatsoratidzwa (kureva kuti shown.bs.toast
chiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira, pachinzvimbo chako toast hairatidze.
toast.show()
hide
Inovanza toast yechimwe chinhu. Inodzokera kumunhu anodaidzira isati yanyatsovanzwa (kureva kuti hidden.bs.toast
chiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira kana iwe wakaita autohide
ku false
.
toast.hide()
kurasa
Inovanza toast yechimwe chinhu. Toast yako icharamba iri paDOM asi haicharatidzike zvakare.
toast.dispose()
getInstance
Static nzira iyo inokutendera iwe kuti uwane iyo toast muenzaniso yakabatana neiyo DOM chinhu
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
Static nzira iyo inokutendera iwe kuti uwane iyo toast muenzaniso yakabatana neiyo DOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Zviitiko
Chiitiko mhando | Tsanangudzo |
---|---|
show.bs.toast |
Ichi chiitiko chinopisa nekukasira kana show nzira yemuenzaniso inodanwa. |
shown.bs.toast |
Ichi chiitiko chinodzingwa kana toast yaitwa kuti ionekwe kumushandisi. |
hide.bs.toast |
Ichi chiitiko chinodzingwa nekukasira kana iyo hide muenzaniso nzira yadaidzwa. |
hidden.bs.toast |
Ichi chiitiko chinodzingwa kana toast yapedza kuvanzwa kubva kumushandisi. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})