Ristað brauð
Sendu tilkynningum til gesta þinna með ristuðu brauði, léttum og auðvelt að sérsníða viðvörunarskilaboðum.
Ristað brauð eru léttar tilkynningar sem eru hannaðar til að líkja eftir ýtitilkynningum sem hafa verið vinsælar af farsíma- og tölvustýrikerfum. Þau eru byggð með flexbox, svo auðvelt er að stilla þau og staðsetja.
Yfirlit
Hlutir sem þarf að vita þegar þú notar ristuðu brauðbæti:
- Ristað brauð eru valin af frammistöðuástæðum, svo þú verður að frumstilla þau sjálfur .
- Ristað brauð mun sjálfkrafa fela sig ef þú tilgreinir ekki
autohide: false
.
prefers-reduced-motion
miðlunarfyrirspurninni. Sjá
kaflann um minni hreyfingu í aðgengisskjölunum okkar .
Dæmi
Basic
Til að hvetja til teygjanlegra og fyrirsjáanlegra ristuðu brauða mælum við með haus og meginmáli. Ristað brauðhausar nota display: flex
, sem gerir auðvelt að stilla efni þökk sé spássíu og flexbox tólum okkar.
Ristað brauð eru eins sveigjanleg og þú þarft og hafa mjög litla álagningu. Að minnsta kosti krefjumst við þess að einn þáttur innihaldi „ristað“ efnið þitt og hvetjum eindregið til að hafna hnappinn.
<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
bekknum á virkan hátt til að fela ristað brauð (með
display:none
, frekar en bara með
opacity:0
). Þetta þarf nú ekki lengur. Hins vegar, fyrir afturábak eindrægni, mun handritið okkar halda áfram að skipta um bekk (jafnvel þó að það sé engin hagnýt þörf fyrir það) þar til í næstu stóru útgáfu.
Lifandi dæmi
Smelltu á hnappinn hér að neðan til að sýna ristað brauð (staðsett með tólunum okkar í neðra hægra horninu) sem hefur verið falið sjálfgefið.
<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>
Við notum eftirfarandi JavaScript til að koma af stað kynningu á lifandi brauði:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
Gegnsær
Ristað brauð eru örlítið hálfgagnsær til að blandast saman við það sem er fyrir neðan þau.
<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>
Stafla
Þú getur stafla ristuðu brauði með því að pakka þeim inn í ristuðu brauðílát, sem mun lóðrétt bæta við smá bili.
<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>
Sérsniðið efni
Sérsníddu ristað brauð með því að fjarlægja undirhluti, fínstilla þá með tólum eða með því að bæta við þinni eigin merkingu. Hér höfum við búið til einfaldara ristað brauð með því að fjarlægja sjálfgefið .toast-header
, bæta við sérsniðnu felu tákni frá Bootstrap Icons og nota nokkur flexbox tól til að stilla útlitið.
<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>
Að öðrum kosti geturðu einnig bætt við viðbótarstýringum og íhlutum við ristað brauð.
<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>
Litasamsetning
Byggt á dæminu hér að ofan geturðu búið til mismunandi litasamsetningu ristað brauð með lita- og bakgrunnstækjum okkar . Hér höfum við bætt við .bg-primary
og .text-white
við .toast
, og síðan bætt .btn-close-white
við lokahnappinn okkar. Fyrir skörpum brún fjarlægjum við sjálfgefna ramma með .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>
Staðsetning
Settu ristað brauð með sérsniðnum CSS eins og þú þarft á þeim að halda. Efst til hægri er oft notað fyrir tilkynningar, sem og efst í miðjunni. Ef þú ætlar bara alltaf að sýna eitt ristað brauð í einu skaltu setja staðsetningarstílana beint á .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>
Fyrir kerfi sem búa til fleiri tilkynningar skaltu íhuga að nota umbúðir svo þau geti auðveldlega staflað.
<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>
Þú getur líka orðið flottur með flexbox tólum til að stilla ristuðu brauði lárétt og/eða lóðrétt.
<!-- 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>
Aðgengi
Skál er ætlað að vera litlar truflanir fyrir gesti þína eða notendur, svo til að hjálpa þeim sem eru með skjálesara og svipaða hjálpartækni, ættir þú að vefja ristuðu brauði á aria-live
svæði . Breytingar á lifandi svæðum (eins og að sprauta inn/uppfæra ristað brauðhluti) eru sjálfkrafa tilkynntar af skjálesendum án þess að þurfa að færa fókus notandans eða trufla notandann á annan hátt. Að auki, hafðu með aria-atomic="true"
til að tryggja að allt ristað brauð sé alltaf tilkynnt sem ein (atóm) eining, frekar en að tilkynna bara hvað var breytt (sem gæti leitt til vandamála ef þú uppfærir aðeins hluta af innihaldi brauðsins, eða ef þú birtir sama ristað brauðið. síðar). Ef nauðsynlegar upplýsingar eru mikilvægar fyrir ferlið, td fyrir lista yfir villur í eyðublaði, notaðu þá viðvörunarhlutanní staðinn fyrir ristað brauð.
Athugaðu að lifandi svæðið þarf að vera til staðar í merkingunni áður en ristað brauð er búið til eða uppfært. Ef þú býrð til bæði á sama tíma og dælir þeim inn á síðuna, verða þau almennt ekki tilkynnt með hjálpartækjum.
Þú þarft líka að aðlaga role
og aria-live
stig eftir innihaldi. Ef það eru mikilvæg skilaboð eins og villa, notaðu role="alert" aria-live="assertive"
, annars notaðu role="status" aria-live="polite"
eiginleika.
Þar sem efnið sem þú ert að sýna breytist, vertu viss um að uppfæra delay
tímamörkin þannig að notendur hafi nægan tíma til að lesa ristað brauð.
<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>
Þegar þú notar autohide: false
verður þú að bæta við lokunarhnappi til að leyfa notendum að hafna ristað brauð.
<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>
Þó að tæknilega sé mögulegt að bæta við stillanlegum/virkum stjórntækjum (svo sem viðbótarhnöppum eða tenglum) í ristuðu brauði, ættir þú að forðast að gera þetta til að fela ristuðu brauði sjálfkrafa. Jafnvel ef þú gefur ristað brauði langan delay
tíma , gætu notendur lyklaborðs og hjálpartækja átt erfitt með að ná ristað brauði í tæka tíð til að grípa til aðgerða (þar sem ristað brauð fá ekki fókus þegar þau eru birt). Ef þú verður að hafa frekari stjórntæki, mælum við með að þú notir ristað brauð með autohide: false
.
Sass
Breytur
$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);
Notkun
Frumstilla ristað brauð með JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Kveikjur
Hægt er að fá brottvísun með data
eigindinni á hnappi í ristuðu brauðinu eins og sýnt er hér að neðan:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
eða á hnapp fyrir utan ristað brauð með því að nota data-bs-target
eins og sýnt er hér að neðan:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
Valmöguleikar
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-
, eins og í data-bs-animation=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
animation |
Boolean | true |
Notaðu CSS fade umskipti á ristað brauð |
autohide |
Boolean | true |
Fela ristað brauð sjálfkrafa |
delay |
númer | 5000 |
Seinkað að fela ristað brauð (ms) |
Aðferðir
Ósamstilltar aðferðir og umskipti
Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .
sýna
Sýnir ristað brauð frumefnis. Snýr aftur til þess sem hringir áður en ristað brauð hefur verið sýnt (þ.e. áður en shown.bs.toast
atburðurinn á sér stað). Þú verður að kalla þessa aðferð handvirkt, í staðinn mun ristað brauð þitt ekki birtast.
toast.show()
fela sig
Felur ristað brauð frumefnis. Snýr aftur til þess sem hringir áður en ristað brauð hefur verið falið (þ.e. áður en hidden.bs.toast
atburðurinn á sér stað). Þú verður að kalla þessa aðferð handvirkt ef þú gerðir autohide
til false
.
toast.hide()
farga
Felur ristað brauð frumefnis. Skálið þitt verður áfram á DOM en mun ekki birtast lengur.
toast.dispose()
getTilvik
Statísk aðferð sem gerir þér kleift að fá ristuðu brauðtilvikið tengt DOM frumefni
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
Statísk aðferð sem gerir þér kleift að fá ristuðu brauðtilvikið tengt DOM frumefni, eða búa til nýjan ef það var ekki frumstillt
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Viðburðir
Tegund viðburðar | Lýsing |
---|---|
show.bs.toast |
Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. |
shown.bs.toast |
Þessi atburður er skotinn þegar ristað brauð hefur verið gert sýnilegt notanda. |
hide.bs.toast |
Þessi atburður er ræstur strax þegar hide tilviksaðferðin hefur verið kölluð. |
hidden.bs.toast |
Þessi atburður er skotinn þegar ristað brauð hefur verið falið fyrir notandanum. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})