Send varsler til de besøkende med en skål, en lett og lett tilpassbar varselmelding.
Toasts er lette varsler designet for å etterligne push-varslene som har blitt populært av mobile og stasjonære operativsystemer. De er bygget med flexbox, så de er enkle å justere og plassere.
Oversikt
Ting å vite når du bruker toast-plugin:
Hvis du bygger JavaScript fra kilden, kreverutil.js det .
Toasts er opt-in av ytelsesgrunner, så du må initialisere dem selv .
Toasts vil automatisk gjemmes hvis du ikke spesifiserer autohide: false.
Eksempler
Grunnleggende
For å oppmuntre til utvidbare og forutsigbare skåler, anbefaler vi en header og body. Toast-overskrifter bruker display: flex, som tillater enkel justering av innhold takket være margin- og flexbox-verktøyene våre.
Toasts er så fleksible som du trenger og har svært lite påkrevd markering. Som et minimum krever vi at et enkelt element inneholder det "ristede" innholdet ditt, og vi oppfordrer på det sterkeste til en avvisningsknapp.
Støvelhempe
11 minutter siden
Hei Verden! Dette er en skålmelding.
Gjennomsiktig
Toasts er også litt gjennomskinnelige, så de blander seg over det de kan virke over. For nettlesere som støtter backdrop-filterCSS-egenskapen, vil vi også forsøke å uskarpe elementene under en skål.
Støvelhempe
11 minutter siden
Hei Verden! Dette er en skålmelding.
Stabling
Når du har flere toasts, vil vi som standard stable dem vertikalt på en lesbar måte.
Støvelhempe
akkurat nå
Se? Akkurat som dette.
Støvelhempe
2 sekunder siden
Vær oppmerksom, toasts stables automatisk
Plassering
Plasser toasts med tilpasset CSS etter hvert som du trenger dem. Øverst til høyre brukes ofte til varsler, og det samme er øverste midten. Hvis du bare noen gang skal vise én skål om gangen, plasser posisjoneringsstilene rett på .toast.
Støvelhempe
11 minutter siden
Hei Verden! Dette er en skålmelding.
For systemer som genererer flere varsler, bør du vurdere å bruke et innpakningselement slik at de enkelt kan stables.
Støvelhempe
akkurat nå
Se? Akkurat som dette.
Støvelhempe
2 sekunder siden
Vær oppmerksom, toasts stables automatisk
Du kan også bli fancy med flexbox-verktøy for å justere toasts horisontalt og/eller vertikalt.
Støvelhempe
11 minutter siden
Hei Verden! Dette er en skålmelding.
tilgjengelighet
Skåler er ment å være små avbrudd for besøkende eller brukere, så for å hjelpe de med skjermlesere og lignende hjelpeteknologier, bør du pakke skålene inn i en aria-liveregion . Endringer i levende regioner (som å injisere/oppdatere en toast-komponent) annonseres automatisk av skjermlesere uten å måtte flytte brukerens fokus eller på annen måte avbryte brukeren. Ta også med aria-atomic="true"for å sikre at hele toasten alltid annonseres som en enkelt (atomær) enhet, i stedet for å kunngjøre hva som ble endret (noe som kan føre til problemer hvis du bare oppdaterer deler av toastens innhold, eller hvis det samme toastinnholdet vises kl. et senere tidspunkt). Hvis nødvendig informasjon er viktig for prosessen, for eksempel for en liste over feil i et skjema, bruk varslingskomponenteni stedet for toast.
Merk at den levende regionen må være til stede i markeringen før toasten genereres eller oppdateres. Hvis du dynamisk genererer begge samtidig og injiserer dem på siden, vil de vanligvis ikke bli annonsert av hjelpeteknologier.
Du må også tilpasse nivået roleog aria-liveavhengig av innholdet. Hvis det er en viktig melding som en feil, bruk role="alert" aria-live="assertive", ellers bruk role="status" aria-live="polite"attributter.
Etter hvert som innholdet du viser endres, sørg for å oppdatere delaytidsavbruddet for å sikre at folk har nok tid til å lese skålen.
Når du bruker autohide: falsemå du legge til en lukkeknapp for å tillate brukere å avvise toasten.
Støvelhempe
11 minutter siden
Hei Verden! Dette er en skålmelding.
JavaScript-adferd
Bruk
Initialiser toasts via JavaScript:
Alternativer
Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-animation="".
Navn
Type
Misligholde
Beskrivelse
animasjon
boolsk
ekte
Bruk en CSS-fade-overgang på toasten
skjul automatisk
boolsk
ekte
Skjul toast automatisk
forsinkelse
Antall
500
Forsink med å skjule toast (ms)
Metoder
Asynkrone metoder og overganger
Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .
Avslører et elements toast. Går tilbake til den som ringer før toast faktisk har blitt vist (dvs. før shown.bs.toasthendelsen inntreffer). Du må kalle denne metoden manuelt, i stedet vises ikke toasten din.
.toast('hide')
Skjuler et elements toast. Går tilbake til den som ringer før skålen faktisk har blitt skjult (dvs. før hidden.bs.toasthendelsen inntreffer). Du må kalle denne metoden manuelt hvis du gjorde autohidetil false.
.toast('dispose')
Skjuler et elements toast. Din toast forblir på DOM, men vil ikke vises lenger.
arrangementer
Hendelsestype
Beskrivelse
vis.bs.toast
Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
vist.bs.toast
Denne hendelsen avfyres når toasten er gjort synlig for brukeren.
hide.bs.toast
Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
skjult.bs.toast
Denne hendelsen utløses når toasten er ferdig skjult for brukeren.