Tost dɛn we dɛn kin mek
Push notis to yu visitɔ dɛn wit tost, wan layt ɛn izi fɔ kɔstɔmayz alɛt mɛsej.
Tost na layt notis dɛn we dɛn mek fɔ falamakata di push notis dɛn we mobayl ɛn dɛsktɔp ɔpreshɔn sistem dɛn dɔn mek pipul dɛn lɛk. Dɛn bil dɛn wit fleksbɔks, so dɛn izi fɔ alaynɛd ɛn pozishɔn.
Ɔvaviu fɔ di Baybul
Tin dɛn fɔ no we yu de yuz di tost plɔgin:
- Tost na opt-in fɔ pefɔmɛns rizin, so yu fɔ initialize am yusɛf .
- Tost dɛn go ayd ɔtomɛtik wan if yu nɔ spɛsifa
autohide: false
.
prefers-reduced-motion
midia kwɛstyɔn. Si di
ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .
Ɛgzampul dɛn
Men
Fɔ ɛnkɔrej tost dɛn we pɔsin kin ɛkstɛnd ɛn we pɔsin kin ebul fɔ tɔk bɔt, wi kin advays fɔ yuz ɛd ɛn bɔdi. Tost headers use display: flex
, alaw izi alaynɛshɔn fɔ kɔntinyu tank to wi margin ɛn flexbox yutiliti dɛn.
Tost dɛn kin fleksibul lɛk aw yu nid ɛn dɛn gɛt smɔl mak we dɛn nid. If nɔto so, wi nid wan ɛlimɛnt fɔ gɛt yu “tost” kɔntinyu ɛn wi rili ɛnkɔrej fɔ dismis bɔtin.
<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>
Tap
Klik di bɔtin we de dɔŋ fɔ sho wan tost (we dɛn put wi yutiliti dɛn na di rayt kɔna we de dɔŋ) we dɛn dɔn ayd bay difɔlt wit .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 we de shayn
Tost dɛn kin translucent smɔl fɔ blend in wit wetin de dɔŋ dɛn.
<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>
Stak we dɛn de stak
Yu kin stak tost dɛn bay we yu rap dɛn insay tost kɔntena, we go ad sɔm spays vertikal wan.
<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>
Kɔstɔm kɔntinyu
Kastamayz yu tost dɛn bay we yu pul di sɔb-kɔmpɔnɛnt dɛn, tweak dɛn wit yutiliti dɛn , ɔ bay we yu ad yu yon mak. Na ya wi dɔn mek wan simpul tost bay we wi pul di difɔlt .toast-header
, ad wan kɔstɔm ayd aykɔn frɔm Bootstrap Aykɔn dɛn , ɛn yuz sɔm fleksbɔks yutiliti dɛn fɔ ajɔst di 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>
Ɔda we de fɔ du dat, yu kin ad ɔda kɔntrol ɛn kɔmpɔnɛnt dɛn bak to tost dɛn.
<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>
Kɔlɔ skim dɛn
We yu bil pan di ɛgzampul we de ɔp, yu kin mek difrɛn tost kɔlɔ skim dɛn wit wi kɔlɔ ɛn bakgrɔn yutiliti dɛn. Na ya wi dɔn ad .bg-primary
ɛn .text-white
to di .toast
, ɛn afta dat wi ad .btn-close-white
to wi klos bɔtin. Fɔ mek yu gɛt krisp ɛj, wi kin pul di difɔlt bɔda wit .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>
Di ples we dɛn fɔ put am
Put tost wit kɔstɔm CSS as yu nid dɛn. Bɔku tɛm, dɛn kin yuz di ɔp rayt say fɔ notis, ɛn na di ɔp pat na di midul. If yu go jɔs ɛva sho wan tost wan tɛm, put di pozishɔn stayl dɛn rayt na di .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>
Fɔ sistem dɛn we de jenarayz mɔ notis, tink bɔt fɔ yuz wan wrap ɛlimɛnt so dat dɛn go ebul fɔ stak izi wan.
<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>
Yu kin gɛt fansi bak wit fleksbɔks yutiliti fɔ alaynɛd tost dɛn ɔrizɔntal ɛn/ɔ vertikal wan.
<!-- 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>
Di we aw pɔsin kin ebul fɔ go de
Dɛn mek tost fɔ bi smɔl smɔl tin dɛn we go ambɔg di wan dɛn we de kam fɛn yu ɔ di wan dɛn we de yuz am, so fɔ ɛp di wan dɛn we gɛt skrin rida ɛn di sem kayn tin dɛn we de ɛp yu, yu fɔ rap yu tost dɛn na wan aria-live
rijyɔn . Chenj dɛn to layv rijyɔn dɛn (lɛk fɔ injɛkt/ɔpdet wan tost kɔmpɔnɛnt) na di wan dɛn we de rid di skrin kin anɔys ɔtomɛtik wan ɛn dɛn nɔ nid fɔ muv di pɔsin in fɔs ɔ ɔda we fɔ ambɔg di pɔsin we de yuz am. Apat frɔm dat, put aria-atomic="true"
fɔ mek shɔ se dɛn kin ɔltɛm anɔys di wan ol tost as wan (atomik) yunit, pas fɔ jɔs anɔys wetin dɛn chenj (we kin mek yu gɛt prɔblɛm if yu jɔs ɔpdet pat pan di tin dɛn we de insay di tost, ɔ if yu de sho di sem tin we de insay di tost na leta tɛm). If di infɔmeshɔn we dɛn nid impɔtant fɔ di prɔses, ɛgz., fɔ wan list fɔ mistek dɛn na wan fɔm, den yuz di alɛt kɔmpɔnɛntinsted fɔ mek dɛn yuz tost.
Notis se di layv rijyɔn nid fɔ de na di mak bifo dɛn mek ɔ ɔpdet di tost. If yu dinamik wan jenarayz ɔl tu di sem tɛm ɛn injɛkt dɛn insay di pej, dɛn nɔ go jɔs de anɔys bay ɛp tɛknɔlɔji dɛn.
Yu nid bak fɔ adap di role
ɛn aria-live
lɛvɛl dipen pan di tin dɛn we de insay. If na impɔtant mɛsej lɛk mistek, yuz role="alert" aria-live="assertive"
, ɔdasay yuz role="status" aria-live="polite"
atribyut dɛn.
As di tin dɛn we yu de sho de chenj, mek shɔ se yu ɔpdet di delay
tɛm we dɔn pas so dat di wan dɛn we de yuz am go gɛt inof tɛm fɔ rid di tost.
<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>
We yu de yuz autohide: false
, yu fɔ ad wan klos bɔtin fɔ alaw di wan dɛn we de yuz am fɔ dismis di tost.
<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>
Pan ɔl we tɛknikal wan i pɔsibul fɔ ad kɔntrol dɛn we yu kin pe atɛnshɔn/akshɔn (lɛk ɔda bɔtin ɔ link dɛn) na yu tost, yu fɔ avɔyd fɔ du dis fɔ ɔtohayd tost dɛn. Ivin if yu gi di tost fɔ lɔng delay
tɛm , di wan dɛn we de yuz di kibɔd ɛn ɛp tɛknɔlɔji kin si se i nɔ izi fɔ rich di tost insay di tɛm fɔ tek akshɔn (bikɔs di tost dɛn nɔ kin gɛt fɔs we dɛn sho dɛn). If yu rili fɔ gɛt ɔda kɔntrol dɛn, wi kin advays yu fɔ yuz tost wit autohide: false
.
Sass we bin de
Di tin dɛn we kin chenj
$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);
Aw fɔ yuz am
Initialize tost dɛn bay JavaSkript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Di tin dɛn we yu kin pik fɔ du
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-bs-
, lɛk insay data-bs-animation=""
.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
animation |
boolean we dɛn kɔl | true |
Aplay wan CSS fade transishɔn to di tost |
autohide |
boolean we dɛn kɔl | true |
Oto ayd di tost |
delay |
nɔmba | 5000 |
Delay fɔ ayd di tost (ms) . |
Di we aw dɛn de du am
Asynchronous mεtכd dεm εn transishכn dεm
Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .
sho
Rivɛl wan ɛlimɛnt in tost. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tost (dat na bifo di shown.bs.toast
tin apin). Yu get fo manually kol dis method, insted yu toast no go sho.
toast.show()
ayd
Ayd wan ɛlimɛnt in tost. I de go bak to di pɔsin we kɔl bifo dɛn rili ayd di tost (dat na bifo di hidden.bs.toast
tin apin). Yu fɔ kɔl dis we wit yu an if yu mek autohide
fɔ false
.
toast.hide()
fɔ trowe am
Ayd wan ɛlimɛnt in tost. Yu tost go de na di DOM bɔt i nɔ go sho igen.
toast.dispose()
getInstans fɔ di wan dɛn we de
Statik we de alaw yu fɔ gɛt di skrol instans we gɛt fɔ du wit wan DOM ɛlimɛnt
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getƆKriɛtInstans
Statik we de alaw yu fɔ gɛt di skrol instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Di tin dɛn we kin apin
Di kayn tin we apin | Tɔk bɔt |
---|---|
show.bs.toast |
Dis ivent de faya wantɛm wantɛm we dɛn kɔl di show instans mɛtɔd. |
shown.bs.toast |
Dɛn kin faya dis ivin we dɛn dɔn mek di pɔsin we de yuz am si di tost. |
hide.bs.toast |
Dis ivent de faya wantɛm wantɛm we hide dɛn dɔn kɔl di instans mɛtɔd. |
hidden.bs.toast |
Dis ivent de faya we di tost dɔn dɔn fɔ ayd frɔm di pɔsin we de yuz am. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})