Source

Rostat bröd

Skicka meddelanden till dina besökare med en skål, ett lätt och enkelt anpassningsbart varningsmeddelande.

Toasts är lätta aviseringar utformade för att efterlikna push-meddelanden som har blivit populariserade av mobila och stationära operativsystem. De är byggda med flexbox, så de är lätta att justera och placera.

Översikt

Saker att veta när du använder toast-plugin:

  • Om du bygger vårt JavaScript från källan kräverutil.js det .
  • Toasts är opt-in av prestandaskäl, så du måste initiera dem själv .
  • Observera att du ansvarar för placeringen av rostat bröd.
  • Rostat bröd gömmer sig automatiskt om du inte anger autohide: false.

Animeringseffekten av denna komponent beror på prefers-reduced-motionmediefrågan. Se avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .

Exempel

Grundläggande

För att uppmuntra töjbara och förutsägbara skålar rekommenderar vi en header och body. Toast-rubriker använder display: flex, vilket möjliggör enkel justering av innehåll tack vare våra marginal- och flexbox-verktyg.

Rostat bröd är så flexibla som du behöver och har väldigt lite märkning som krävs. Som ett minimum kräver vi att ett enda element innehåller ditt "rostade" innehåll och uppmuntrar starkt en avvisande knapp.

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

Genomskinlig

Rostat bröd är också något genomskinligt, så de smälter över allt de kan verka över. För webbläsare som stöder backdrop-filterCSS-egenskapen kommer vi också att försöka sudda ut elementen 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>

Stapling

När du har flera rostat bröd staplar vi som standard dem vertikalt på ett läsbart sätt.

<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

Placera rostat bröd med anpassad CSS när du behöver dem. Den övre högra delen används ofta för aviseringar, liksom den övre mitten. Om du bara någonsin ska visa en skål i taget, placera positioneringsstilarna direkt på .toast.

Bootstrap 11 minuter sedan
Hej världen! Detta är ett skålmeddelande. 
<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>

För system som genererar fler aviseringar, överväg att använda ett omslagselement så att de enkelt kan staplas.

<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 också bli snygg med flexbox-verktyg för att rikta in rostat bröd horisontellt och/eller vertikalt.

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

Tillgänglighet

Skålar är avsedda att vara små avbrott för dina besökare eller användare, så för att hjälpa dem med skärmläsare och liknande hjälpmedelsteknik bör du slå in dina skålar i en aria-liveregion . Ändringar av levande regioner (som injicering/uppdatering av en toast-komponent) meddelas automatiskt av skärmläsare utan att behöva flytta användarens fokus eller på annat sätt avbryta användaren. Inkludera dessutom aria-atomic="true"för att säkerställa att hela toasten alltid annonseras som en enda (atomär) enhet, snarare än att meddela vad som ändrades (vilket kan leda till problem om du bara uppdaterar en del av toastens innehåll, eller om samma toastinnehåll visas på en senare tidpunkt). Om den information som behövs är viktig för processen, t.ex. för en lista över fel i ett formulär, använd då varningskomponentenistället för rostat bröd.

Observera att den levande regionen måste finnas i markeringen innan toasten genereras eller uppdateras. Om du dynamiskt genererar båda samtidigt och injicerar dem på sidan, kommer de i allmänhet inte att meddelas av hjälpmedel.

Du måste också anpassa nivån roleoch aria-liveberoende på innehållet. Om det är ett viktigt meddelande som ett fel, använd role="alert" aria-live="assertive", annars använd role="status" aria-live="polite"attribut.

När innehållet du visar ändras, se till att uppdatera delaytimeouten för att säkerställa att folk har tillräckligt med tid att läsa 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 använder autohide: falsemåste du lägga till en stängningsknapp för att tillåta användare att avvisa toasten.

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

Användande

Initiera skålar via JavaScript:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-animation="".

namn Typ Standard Beskrivning
animation booleskt Sann Applicera en CSS-fade-övergång på toasten
autohide booleskt Sann Dölj rostat bröd automatiskt
dröjsmål siffra 500 Fördröj att dölja toasten (ms)

Metoder

Asynkrona metoder och övergångar

Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .

Se vår JavaScript-dokumentation för mer information .

$().toast(options)

Fäster en toasthanterare till en elementsamling.

.toast('show')

Avslöjar ett elements toast. Återgår till den som ringer innan skålen faktiskt har visats (dvs innan shown.bs.toasthändelsen inträffar). Du måste anropa den här metoden manuellt, istället visas inte din toast.

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

.toast('hide')

Döljer ett elements toast. Återgår till den som ringer innan toasten faktiskt har gömts (dvs innan hidden.bs.toasthändelsen inträffar). Du måste anropa den här metoden manuellt om du gjorde autohidetill false.

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

.toast('dispose')

Döljer ett elements toast. Din toast kommer att finnas kvar på DOM men kommer inte att visas längre.

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

evenemang

Event typ Beskrivning
visa.bs.toast Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visas.bs.toast Denna händelse avfyras när toasten har gjorts synlig för användaren.
hide.bs.toast Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
gömd.bs.toast Denna händelse avfyras när toasten har döljts för användaren. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})