Source

Toasts

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

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:

  • Hvis du bygger vores JavaScript fra kilden, kræverutil.js det .
  • Toasts er opt-in af præstationsmæssige årsager, så du skal initialisere dem selv .
  • Bemærk venligst, at du er ansvarlig for at placere toasts.
  • 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.

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

Gennemsigtig

Toasts er også lidt gennemskinnelige, så de blander sig med, hvad de måtte se ud over. For browsere, der understøtter backdrop-filterCSS-egenskaben, vil vi også forsøge at sløre elementerne under en skål.

<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, stabler vi som standard dem lodret på en læsbar måde.

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

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. 
<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, der genererer flere meddelelser, kan du overveje at bruge et indpakningselement, så de nemt kan stables.

<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å blive fancy med flexbox-værktøjer til at justere toasts vandret og/eller lodret.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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>

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 at annoncere, hvad der blev ændret (hvilket kan føre til problemer, hvis du kun opdaterer en del af toastens indhold, eller hvis det samme toastindhold vises kl. 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 for at sikre, at folk har tid nok til at læse 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 bruger autohide: false, skal du tilføje en lukkeknap for at tillade brugere at afvise skålen.

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

JavaScript adfærd

Brug

Initialiser toasts via JavaScript:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-animation="".

Navn Type Standard Beskrivelse
animation boolesk rigtigt Anvend en CSS-fade-overgang på toasten
autoskjul boolesk rigtigt Skjul skålen automatisk
forsinke nummer 500 Forsink med at skjule skålen (ms)

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 .

$().toast(options)

Vedhæfter en toast-handler til en elementsamling.

.toast('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.

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

.toast('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.

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

.toast('dispose')

Skjuler et elements toast. Din skål forbliver på DOM, men vises ikke længere.

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

Begivenheder

Begivenhedstype Beskrivelse
vis.bs.toast Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
vist.bs.toast Denne hændelse affyres, når skålen er gjort synlig for brugeren.
hide.bs.toast Denne hændelse udløses straks, når hideinstansmetoden er blevet kaldt.
skjult.bs.toast Denne begivenhed affyres, når skålen er færdig med at blive skjult for brugeren. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})