Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Toasts

Send meddelelser til dine besøgende med en skål, en let og let tilpasselig advarselsmeddelelse.

På denne side

Toasts er letvægtsmeddelelser designet til at efterligne push-beskeder, der er blevet populært af mobil- og desktopoperativsystemer. De er bygget med flexbox, så de er nemme at justere og placere.

Oversigt

Ting at vide, når du bruger toast-plugin:

  • Toasts er opt-in af præstationsmæssige årsager, så du skal initialisere dem selv .
  • Toasts vil automatisk skjule sig, hvis du ikke angiver autohide: false.
Animationseffekten af ​​denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Eksempler

Grundlæggende

For at tilskynde til strækbare og forudsigelige toasts anbefaler vi en header og body. Toast-headers bruger display: flex, hvilket tillader nem justering af indhold takket være vores margin- og flexbox-værktøjer.

Toasts er så fleksible, som du har brug for, og har meget lidt påkrævet markering. Vi kræver som minimum et enkelt element for at indeholde dit "ristede" indhold og opfordrer kraftigt til en afvis-knap.

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 tilføjede vores scripts dynamisk .hideklassen for fuldstændigt at skjule en skål (med display:none, i stedet for kun med opacity:0). Dette er nu ikke nødvendigt længere. Men for bagudkompatibilitet vil vores script fortsætte med at skifte klassen (selvom der ikke er praktisk behov for det) indtil den næste større version.

Levende eksempel

Klik på knappen nedenfor for at vise en skål (placeret med vores hjælpeprogrammer i nederste højre hjørne), der er blevet 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 bruger følgende JavaScript til at udløse vores 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()
  })
}

Gennemsigtig

Toasts er let gennemsigtige, så de passer ind i det, der 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 at pakke dem ind i en toastbeholder, som lodret tilføjer lidt mellemrum.

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>

Tilpasset indhold

Tilpas dine toasts ved at fjerne underkomponenter, finjustere dem med hjælpeprogrammer eller ved at tilføje din egen markering. Her har vi skabt en enklere skål ved at fjerne standarden .toast-header, tilføje et brugerdefineret skjul-ikon fra Bootstrap Icons og bruge nogle flexbox-værktøjer til at justere layoutet.

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å tilføje yderligere 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>

Farveskemaer

Med udgangspunkt i ovenstående eksempel kan du oprette forskellige toastfarveskemaer med vores farve- og baggrundsværktøjer . Her har vi tilføjet .text-bg-primarytil .toast, og derefter tilføjet .btn-close-whitetil vores lukkeknap. For at få en sprød kant fjerner vi standardrammen 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>

Placering

Placer toasts med tilpasset CSS, efterhånden som du har brug for dem. Øverst til højre bruges ofte til notifikationer, ligesom den øverste midterste. Hvis du kun skal vise en skål ad gangen, skal du placere positioneringsstilene lige på .toast.

Bootstrap 11 minutter siden
Hej Verden! Dette er en skål besked.
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, der genererer flere meddelelser, kan du overveje at bruge et indpakningselement, så de nemt 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å blive fancy med flexbox-værktøjer til at justere toasts vandret og/eller lodret.

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>

Tilgængelighed

Toasts er beregnet til at være små afbrydelser for dine besøgende eller brugere, så for at hjælpe dem med skærmlæsere og lignende hjælpeteknologier, bør du pakke dine toasts ind i en aria-liveregion . Ændringer i levende regioner (såsom indsprøjtning/opdatering af en toast-komponent) annonceres automatisk af skærmlæsere uden at skulle flytte brugerens fokus eller på anden måde afbryde brugeren. Medtag derudover aria-atomic="true"for at sikre, at hele toasten altid annonceres som en enkelt (atomare) enhed, i stedet for blot at annoncere, hvad der blev ændret (hvilket kan føre til problemer, hvis du kun opdaterer en del af toastens indhold, eller hvis du viser det samme toastindhold på et senere tidspunkt). Hvis de nødvendige oplysninger er vigtige for processen, f.eks. for en liste over fejl i en formular, så brug advarselskomponenteni stedet for toast.

Bemærk, at den levende region skal være til stede i markeringen, før toasten genereres eller opdateres. Hvis du dynamisk genererer begge på samme tid og injicerer dem på siden, vil de generelt ikke blive annonceret af hjælpeteknologier.

Du skal også tilpasse niveauet roleog aria-liveafhængigt af indholdet. Hvis det er en vigtig besked, f.eks. en fejl, skal du bruge role="alert" aria-live="assertive", ellers bruge role="status" aria-live="polite"attributter.

Efterhånden som det indhold, du viser, ændres, skal du sørge for at opdatere delaytimeoutet , så brugerne har tid nok til at læse 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 bruger autohide: false, skal du tilføje en lukkeknap for at tillade brugere at afvise skålen.

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>

Selvom det teknisk set er muligt at tilføje fokuserbare/handlingsbare kontroller (såsom yderligere knapper eller links) i din toast, bør du undgå at gøre dette for automatisk at skjule toasts. Selvom du giver toasten en lang delaytimeout , kan brugere af tastatur og hjælpeteknologi finde det svært at nå toasten i tide til at handle (da toasts ikke får fokus, når de vises). Hvis du absolut skal have yderligere kontrol, anbefaler vi at bruge en toast med autohide: false.

CSS

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger toasts nu lokale CSS-variabler .toasttil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$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 variable

$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);

Brug

Initialiser toasts via JavaScript:

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

Udløsere

Afvisning kan opnås med dataattributten på en knap i skålen som vist nedenfor:

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

eller på en knap uden for toasten ved at bruge data-bs-targetsom vist nedenfor:

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

Muligheder

Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration 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 titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.

Navn Type Standard Beskrivelse
animation boolesk true Anvend en CSS-fade-overgang på toasten.
autohide boolesk true Skjul automatisk toast efter forsinkelsen.
delay nummer 5000 Forsinkelse i millisekunder, før du skjuler toasten.

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

Metode Beskrivelse
dispose Skjuler et elements toast. Din skål forbliver på DOM, men vises ikke længere.
getInstance Statisk metode, som giver dig mulighed for at få toast-instansen forbundet med et DOM-element.
For eksempel: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Returnerer en Bootstrap toast-instans.
getOrCreateInstance Statisk metode, som giver dig mulighed for at få toast-forekomsten tilknyttet et DOM-element, eller oprette en ny, hvis den ikke blev initialiseret.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Returnerer en Bootstrap toast-instans.
hide Skjuler et elements toast. Vender tilbage til den, der ringer, før skålen rent faktisk er blevet skjult (dvs. før hidden.bs.toastbegivenheden indtræffer). Du skal manuelt kalde denne metode, hvis du lavede autohidetil false.
isShown Returnerer en boolesk værdi i henhold til toasts synlighedstilstand.
show Afslører et elements toast. Vender tilbage til den, der ringer, før skålen faktisk er blevet vist (dvs. før shown.bs.toastbegivenheden indtræffer). Du skal manuelt kalde denne metode, i stedet vises din toast ikke.

Begivenheder

Begivenhed Beskrivelse
hide.bs.toast Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
hidden.bs.toast Denne begivenhed affyres, når skålen er færdig med at blive skjult for brugeren.
show.bs.toast Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
shown.bs.toast Denne hændelse affyres, når skålen er gjort synlig for brugeren. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})