Gå til hovedinnhold Hopp til dokumentnavigering
Check
in English

Skåler

Send varsler til de besøkende med en skål, en lett og lett tilpassbar varselmelding.

På denne siden

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:

  • Toasts er opt-in av ytelsesgrunner, så du må initialisere dem selv .
  • 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.

html 
<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>
Tidligere la skriptene våre dynamisk til .hideklassen for å skjule en skål (med display:none, i stedet for bare med opacity:0). Dette er nå ikke nødvendig lenger. Men for bakoverkompatibilitet vil skriptet vårt fortsette å bytte klassen (selv om det ikke er praktisk behov for det) til neste hovedversjon.

Levende eksempel

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.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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 bruker følgende JavaScript for å utløse vår live toast-demo:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Gjennomsiktig

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

html 
<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>

Stabling

Du kan stable toasts ved å pakke dem inn i en toastbeholder, som vil legge til litt mellomrom vertikalt.

html 
<div class="toast-container position-static">
  <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>

Egendefinert innhold

Tilpass skålene dine ved å fjerne underkomponenter, finjustere dem med verktøy eller ved å legge til din egen markering. Her har vi laget en enklere toast ved å fjerne standard .toast-header, legge til et tilpasset skjul-ikon fra Bootstrap Icons , og bruke noen flexbox-verktøy for å justere oppsettet.

html 
<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>

Alternativt kan du også legge til flere kontroller og komponenter til toasts.

html 
<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>

Fargevalg

Med utgangspunkt i eksemplet ovenfor kan du lage forskjellige toastfargeskjemaer med farge- og bakgrunnsverktøyene våre . Her har vi lagt .text-bg-primarytil .toast, og deretter lagt .btn-close-whitetil lukkeknappen vår. For en skarp kant fjerner vi standardkanten med .border-0.

html 
<div class="toast align-items-center text-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>

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

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

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

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

html 
<!-- 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>

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

html 
<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>

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 delaytidsavbrudd , kan brukere av tastatur og hjelpemidler finne det vanskelig å nå toasten i tide til å handle (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.

CSS

Variabler

Lagt til i v5.2.0

Som en del av Bootstraps utviklende CSS-variabletilnærming, bruker toasts nå lokale CSS-variabler .toastfor forbedret sanntidstilpasning. Verdier for CSS-variablene settes via Sass, så Sass-tilpasning støttes fortsatt også.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass variabler

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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);

Bruk

Initialiser toasts via JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Utløsere

Avvisning kan oppnås med dataattributtet på en knapp i toasten som vist nedenfor:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

eller på en knapp utenfor toasten ved å bruke data-bs-targetsom vist nedenfor:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Alternativer

Siden alternativer kan sendes via dataattributter eller JavaScript, kan du legge til et alternativnavn til data-bs-, som i data-bs-animation="{value}". Sørg for å endre sakstypen for alternativnavnet fra " camelCase " til " kebab-case " når du sender alternativene via dataattributter. Bruk for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 støtter alle komponenter et eksperimentelt reservert dataattributt data-bs-configsom kan inneholde enkel komponentkonfigurasjon som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleverdien være 456og de separate dataattributtene vil overstyre verdier gitt på data-bs-config. I tillegg kan eksisterende dataattributter inneholde JSON-verdier som data-bs-delay='{"show":0,"hide":150}'.

Navn Type Misligholde Beskrivelse
animation boolsk true Bruk en CSS-fade-overgang på toasten.
autohide boolsk true Skjul toasten automatisk etter forsinkelsen.
delay Antall 5000 Forsinkelse i millisekunder før du skjuler toast.

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 .

Metode Beskrivelse
dispose Skjuler et elements toast. Skålen din forblir på DOM, men vises ikke lenger.
getInstance Statisk metode som lar deg få toast-forekomsten assosiert med et DOM-element.
For eksempel: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Returnerer en Bootstrap toast-forekomst.
getOrCreateInstance Statisk metode som lar deg få toast-forekomsten knyttet til et DOM-element, eller opprette en ny, i tilfelle den ikke ble initialisert.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Returnerer en Bootstrap toast-forekomst.
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.
isShown Returnerer en boolsk i henhold til toasts synlighetstilstand.
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.

arrangementer

Begivenhet Beskrivelse
hide.bs.toast Denne hendelsen utløses umiddelbart når hideinstansmetoden er kalt.
hidden.bs.toast Denne hendelsen utløses når toasten er ferdig skjult for brukeren.
show.bs.toast Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
shown.bs.toast Denne hendelsen avfyres når toasten er gjort synlig for brukeren. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})