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 populärt 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
.
Animeringseffekten av denna komponent beror på 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.
Genomskinlig
Rostat bröd är också något genomskinligt, så de smälter över allt de kan verka över. För webbläsare som stöder backdrop-filter
CSS-egenskapen kommer vi också att försöka sudda ut elementen under en skål.
Stapling
När du har flera rostat bröd staplar vi som standard dem vertikalt på ett läsbart sätt.
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
.
För system som genererar fler aviseringar, överväg att använda ett omslagselement så att de enkelt kan staplas.
Du kan också bli snygg med flexbox-verktyg för att rikta in rostat bröd horisontellt och/eller vertikalt.
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 annonseras som en enda (atomär) enhet, snarare än att 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 på 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
timeouten för att säkerställa att folk har tillräckligt med tid att läsa skålen.
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.
JavaScript-beteende
Användande
Initiera skålar via JavaScript:
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.
.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
.
.toast('dispose')
Döljer ett elements toast. Din toast kommer att finnas kvar på DOM men kommer inte att visas längre.
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. |