Rostat bröd
Skicka meddelanden till dina besökare med en skål, ett lätt och enkelt anpassningsbart varningsmeddelande.
Toasts är lätta aviseringar utformade för att efterlikna push-meddelanden som har blivit populariserade av mobila och stationära operativsystem. De är byggda med flexbox, så de är lätta att justera och placera.
Översikt
Saker att veta när du använder toast-plugin:
- Om du bygger vårt JavaScript från källan kräver
util.js
det . - Toasts är opt-in av prestandaskäl, så du måste initiera dem själv .
- Observera att du ansvarar för placeringen av rostat bröd.
- Rostat bröd gömmer sig automatiskt om du inte anger
autohide: false
.
prefers-reduced-motion
mediefrågan. Se
avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .
Exempel
Grundläggande
För att uppmuntra töjbara och förutsägbara skålar rekommenderar vi en header och body. Toast-rubriker använder display: flex
, vilket möjliggör enkel justering av innehåll tack vare våra marginal- och flexbox-verktyg.
Rostat bröd är så flexibla som du behöver och har väldigt lite märkning som krävs. Som ett minimum kräver vi att ett enda element innehåller ditt "rostade" innehåll och uppmuntrar starkt en avvisande knapp.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
leva
Klicka på knappen nedan för att visa en skål (placerad med våra verktyg i det nedre högra hörnet) som har dolts som standard med .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Genomskinlig
Rostat bröd är något genomskinligt för att smälta in med det som finns under dem.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Stapling
När du har flera rostat bröd staplar vi som standard dem vertikalt på ett läsbart sätt.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</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 mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
Placering
Placera rostat bröd med anpassad CSS när du behöver dem. Den övre högra delen används ofta för aviseringar, liksom den övre mitten. Om du bara någonsin ska visa en skål i taget, placera positioneringsstilarna direkt på .toast
.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
För system som genererar fler aviseringar, överväg att använda ett omslagselement så att de enkelt kan staplas.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</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 mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
Du kan också bli snygg med flexbox-verktyg för att rikta in rostat bröd horisontellt och/eller vertikalt.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Tillgänglighet
Skålar är avsedda att vara små avbrott för dina besökare eller användare, så för att hjälpa dem med skärmläsare och liknande hjälpmedelsteknik bör du slå in dina skålar i en aria-live
region . Ändringar av levande regioner (som injicering/uppdatering av en toast-komponent) meddelas automatiskt av skärmläsare utan att behöva flytta användarens fokus eller på annat sätt avbryta användaren. Inkludera dessutom aria-atomic="true"
för att säkerställa att hela toasten alltid tillkännages som en enda (atomär) enhet, snarare än att bara meddela vad som ändrades (vilket kan leda till problem om du bara uppdaterar en del av toastens innehåll, eller om samma toastinnehåll visas vid en senare tidpunkt). Om den information som behövs är viktig för processen, t.ex. för en lista över fel i ett formulär, använd då varningskomponentenistället för rostat bröd.
Observera att den levande regionen måste finnas i markeringen innan toasten genereras eller uppdateras. Om du dynamiskt genererar båda samtidigt och injicerar dem på sidan, kommer de i allmänhet inte att meddelas av hjälpmedel.
Du måste också anpassa nivån role
och aria-live
beroende på innehållet. Om det är ett viktigt meddelande som ett fel, använd role="alert" aria-live="assertive"
, annars använd role="status" aria-live="polite"
attribut.
När innehållet du visar ändras, se till att uppdatera delay
timeout så att användarna har tillräckligt med tid att läsa skålen.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
När du använder autohide: false
måste du lägga till en stängningsknapp för att tillåta användare att avvisa toasten.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Även om det tekniskt är möjligt att lägga till fokuserbara/handlingsbara kontroller (som ytterligare knappar eller länkar) i din toast, bör du undvika att göra detta för att autodölja toaster. Även om du ger rostat bröd en lång delay
timeout kan användare av tangentbord och hjälpmedel ha svårt att nå toasten i tid för att kunna vidta åtgärder (eftersom rostat bröd inte får fokus när de visas). Om du absolut måste ha ytterligare kontroller rekommenderar vi att du använder en toast med autohide: false
.
JavaScript-beteende
Användande
Initiera skålar via JavaScript:
$('.toast').toast(option)
alternativ
Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-
, som i data-animation=""
.
namn | Typ | Standard | Beskrivning |
---|---|---|---|
animation | booleskt | Sann | Applicera en CSS-fade-övergång på toasten |
autohide | booleskt | Sann | Dölj rostat bröd automatiskt |
dröjsmål | siffra | 500 |
Fördröj att dölja toasten (ms) |
Metoder
Asynkrona metoder och övergångar
Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .
$().toast(options)
Fäster en toasthanterare till en elementsamling.
.toast('show')
Avslöjar ett elements toast. Återgår till den som ringer innan skålen faktiskt har visats (dvs innan shown.bs.toast
händelsen inträffar). Du måste anropa den här metoden manuellt, istället visas inte din toast.
$('#element').toast('show')
.toast('hide')
Döljer ett elements toast. Återgår till den som ringer innan toasten faktiskt har gömts (dvs innan hidden.bs.toast
händelsen inträffar). Du måste anropa den här metoden manuellt om du gjorde autohide
till false
.
$('#element').toast('hide')
.toast('dispose')
Döljer ett elements toast. Din toast kommer att finnas kvar på DOM men kommer inte att visas längre.
$('#element').toast('dispose')
evenemang
Event typ | Beskrivning |
---|---|
visa.bs.toast | Denna händelse aktiveras omedelbart när show instansmetoden anropas. |
visas.bs.toast | Denna händelse avfyras när toasten har gjorts synlig för användaren. |
hide.bs.toast | Denna händelse aktiveras omedelbart när hide instansmetoden har anropats. |
gömd.bs.toast | Denna händelse avfyras när toasten har döljts för användaren. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})