Skåler

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 .
Vær oppmerksom på at du er ansvarlig for å plassere toasts.
Toasts vil automatisk skjule hvis du ikke spesifiserer autohide: false.

Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesøket. Se delen for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .

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.

Hei Verden! Dette er en skålmelding.

<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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Bo

Klikk på knappen nedenfor for å vise en skål (plassert med verktøyene våre i nedre høyre hjørne) som er skjult 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">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Gjennomsiktig

Toasts er litt gjennomsiktige for å passe inn med det som er under dem.

Hei Verden! Dette er en skålmelding.

<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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Stabling

Når du har flere toasts, vil vi som standard stable dem vertikalt på en lesbar måte.

Se? Akkurat som dette.

Vær oppmerksom, toasts stables automatisk

<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">&times;</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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

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.

Hei Verden! Dette er en skålmelding.

<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">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

For systemer som genererer flere varsler, bør du vurdere å bruke et innpakningselement slik at de enkelt kan stables.

Se? Akkurat som dette.

Vær oppmerksom, toasts stables automatisk

<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">&times;</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">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Du kan også bli fancy med flexbox-verktøy for å justere toasts horisontalt og/eller vertikalt.

Hei Verden! Dette er en skålmelding.

<!-- 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">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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 bare å 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 på 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 slik at brukerne har nok tid til å lese 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 bruker autohide: falsemå du legge til en lukkeknapp for å tillate brukere å avvise toasten.

Hei Verden! Dette er en skålmelding.

<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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Selv om det teknisk sett er mulig å legge til kontrollerbare/handlingsbare kontroller (som ekstra knapper eller lenker) i toasten din, bør du unngå å gjøre dette for å automatisk skjule toasts. Selv om du gir toasten en lang delaytimeout , kan brukere av tastatur og hjelpemidler finne det vanskelig å nå toasten i tide til å iverksette tiltak (siden toasts ikke får fokus når de vises). Hvis du absolutt må ha ytterligere kontroller, anbefaler vi å bruke en toast med autohide: false.

JavaScript-adferd

Bruk

Initialiser toasts via JavaScript:

$('.toast').toast(option)

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 .

Se vår JavaScript-dokumentasjon for mer informasjon .

`$().toast(options)`

Fester en toastbehandler til en elementsamling.

`.toast('show')`

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.

$('#element').toast('show')

`.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.

$('#element').toast('hide')

`.toast('dispose')`

Skjuler et elements toast. Skålen din forblir på DOM, men vises ikke lenger.

$('#element').toast('dispose')

arrangementer

Hendelsestype	Beskrivelse
vis.bs.toast	Denne hendelsen utløses umiddelbart når `show`instansmetoden 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 `hide`instansmetoden er kalt.
skjult.bs.toast	Denne hendelsen utløses når toasten er ferdig skjult for brukeren.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})