Pirítósok

Értesítéseket küldjön látogatóinak pirítóssal, egy könnyű és könnyen testreszabható figyelmeztető üzenettel.

Ezen az oldalon

A pirítósok könnyű értesítések, amelyek a mobil és asztali operációs rendszerek által népszerűsített push értesítéseket utánozzák. Flexbox-szal készültek, így könnyen igazíthatók és pozícionálhatók.

Áttekintés

Tudnivalók a pirítós bővítmény használatakor:

A pirítósok teljesítménye miatt engedélyezettek, ezért Önnek kell inicializálnia őket .
Ha nem adja meg, a pirítósok automatikusan elrejtődnek autohide: false.

Ennek az összetevőnek az animációs hatása a médialekérdezéstől függ prefers-reduced-motion. Tekintse meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .

Példák

Alapvető

A nyújtható és kiszámítható pohárköszöntések ösztönzése érdekében fejlécet és törzset ajánlunk. Toast fejlécek használata display: flex, amely lehetővé teszi a tartalom egyszerű igazítását a margó és flexbox segédprogramoknak köszönhetően.

A pirítósok olyan rugalmasak, amennyire szüksége van, és nagyon kevés szükséges jelölést tartalmaznak. Legalább egyetlen elemre van szükségünk a „pirított” tartalomhoz, és határozottan javasoljuk az elvetés gomb használatát.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Korábban a szkriptjeink dinamikusan adták hozzá az .hideosztályt, hogy teljesen elrejtse a pohárköszöntőt (és display:nonenem csak a -val opacity:0). Erre most már nincs szükség. A visszafelé kompatibilitás érdekében azonban a szkriptünk továbbra is váltogatja az osztályt (bár nincs rá gyakorlati igény) a következő főverzióig.

Élő példa

Kattintson az alábbi gombra egy pirítós megjelenítéséhez (a jobb alsó sarokban a segédprogramokkal van elhelyezve), amely alapértelmezés szerint el van rejtve.

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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>

A következő JavaScriptet használjuk az élő pirítós bemutató elindításához:

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

    toast.show()
  })
}

Áttetsző

A pirítós enyhén áttetsző, hogy összeolvadjon az alattuk lévővel.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Halmozás

A pirítósokat pirítóstartóba csomagolva egymásra rakhatja, amely függőlegesen némi távolságot ad.

Lát? Mint ez.

Figyelem, a pirítósok automatikusan egymásra halmozódnak

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

Egyedi tartalom

Szabja testre pirítósait az alkomponensek eltávolításával, a segédprogramokkal történő finomítással vagy saját jelölések hozzáadásával. Itt egy egyszerűbb pohárköszöntőt hoztunk létre: eltávolítottuk az alapértelmezettet .toast-header, hozzáadtunk egy egyéni elrejtési ikont a Bootstrap Iconshoz , és néhány flexbox segédprogramot használtunk az elrendezés módosításához.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Alternatív megoldásként további vezérlőket és összetevőket is hozzáadhat a pirítósokhoz.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Színsémák

A fenti példára építve különböző pirítós-színsémákat hozhat létre szín- és háttérprogramjainkkal . Itt hozzáadtuk a .bg-primaryés .text-whitea .toast, majd .btn-close-whitea bezárás gombhoz. Az éles él érdekében eltávolítjuk az alapértelmezett szegélyt a -val .border-0.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Elhelyezés

Helyezzen el pirítósokat egyéni CSS-szel, amikor szüksége van rájuk. A jobb felső rész gyakran az értesítésekhez használatos, csakúgy, mint a felső közép. Ha egyszerre csak egy pohárköszöntőt fog mutatni, helyezze a pozicionálási stílusokat közvetlenül a ikonra .toast.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Azoknál a rendszereknél, amelyek több értesítést generálnak, fontolja meg egy burkolóelem használatát, hogy könnyen egymásra rakhassák őket.

Lát? Mint ez.

Figyelem, a pirítósok automatikusan egymásra halmozódnak

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

A flexbox segédprogramokkal a pirítósokat vízszintesen és/vagy függőlegesen igazíthatja.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Megközelíthetőség

A pirítósok célja, hogy kis megszakításokat okozzanak a látogatóknak vagy a felhasználóknak, ezért a képernyőolvasóval és hasonló kisegítő technológiával rendelkezők segítése érdekében a pirítósokat egy aria-liverégióba kell csomagolnia . Az élő régiók változásait (például egy pirítós komponens befecskendezését/frissítését) a képernyőolvasók automatikusan bejelentik anélkül, hogy a felhasználó fókuszát át kellene helyezni vagy más módon meg kellene szakítaniuk a felhasználót. Ezen túlmenően, tegye bele aria-atomic="true"annak biztosítására, hogy a teljes pirítóst mindig egyetlen (atomi) egységként jelentse be ahelyett, hogy csak a változtatásokat közölné (ami problémákhoz vezethet, ha a pirítós tartalmának csak egy részét frissíti, vagy ha ugyanazt a pirítós tartalmat jeleníti meg egy későbbi időpontban). Ha a szükséges információk fontosak a folyamathoz, például egy űrlap hibalistájához, akkor használja a figyelmeztető komponenstpirítós helyett.

Vegye figyelembe, hogy az élő régiónak jelen kell lennie a jelölésben , mielőtt a pirítóst generálja vagy frissíti. Ha dinamikusan generálja mindkettőt egyszerre, és beilleszti őket az oldalba, általában nem jelentik be a kisegítő technológiák.

roleA és a szintet is módosítani kell aria-livea tartalomtól függően. Ha fontos üzenet, például hiba, használja a role="alert" aria-live="assertive", ellenkező esetben pedig role="status" aria-live="polite"attribútumokat.

Ahogy a megjelenített tartalom változik, ügyeljen arra, hogy frissítse az delayidőtúllépést , hogy a felhasználóknak elegendő idejük legyen elolvasni a pohárköszöntőt.

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

A használatakor autohide: falsehozzá kell adni egy bezárás gombot, hogy a felhasználók elvethessék a pirítóst.

Helló Világ! Ez egy pohárköszöntő üzenet.

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

Bár technikailag lehetséges fókuszálható/működtethető vezérlők (például további gombok vagy hivatkozások) hozzáadása a pirítóshoz, kerülje ezt az automatikus elrejtő pirítósoknál. Még ha hosszú időt ad is meg a pirítósnak delay, a billentyűzet és a kisegítő technológiák felhasználói nehezen érhetik el a pirítóst időben, hogy cselekedjenek (mivel a pirítósok nem kapnak fókuszt, amikor megjelennek). Ha feltétlenül további vezérlésre van szüksége, javasoljuk, hogy használjon pirítóst a -val autohide: false.

Sass

Változók

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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);

Használat

Pirítósok inicializálása JavaScript segítségével:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Kiváltók

Az elbocsátás a pirítósbandata lévő gombon található attribútum segítségével érhető el, az alábbiak szerint:

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

vagy a pirítós melletti gombon az data-bs-targetalábbi módon:

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

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-bs-következőhöz: data-bs-animation="".

Név	típus	Alapértelmezett	Leírás
`animation`	logikai érték	`true`	Alkalmazzon CSS-halványítást a pirítósra
`autohide`	logikai érték	`true`	A pirítós automatikus elrejtése
`delay`	szám	`5000`	A pirítós elrejtésének késleltetése (ms)

Mód

Aszinkron módszerek és átmenetek

Minden API metódus aszinkron , és átmenetet indít . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .

További információért tekintse meg JavaScript dokumentációnkat .

előadás

Felfedi egy elem pirítósát. Visszatér a hívóhoz, mielőtt a pirítóst ténylegesen felmutatták (azaz az shown.bs.toastesemény bekövetkezte előtt). Ezt a módszert manuálisan kell meghívnia, ehelyett a pirítós nem jelenik meg.

toast.show()

elrejt

Elrejti egy elem pirítósát. Visszatér a hívóhoz, mielőtt a pirítóst ténylegesen elrejtették (azaz az hidden.bs.toastesemény bekövetkezte előtt). Ezt a metódust manuálisan kell meghívnia, ha ezt autohidetette false.

toast.hide()

eldob

Elrejti egy elem pirítósát. A pirítós a DOM-on marad, de többé nem jelenik meg.

toast.dispose()

getInstance

Statikus módszer, amely lehetővé teszi a DOM elemhez társított toast példány lekérését

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Statikus módszer, amely lehetővé teszi a toast példány lekérését egy DOM-elemhez, vagy új létrehozását, ha nem inicializálták

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Események

Esemény típus	Leírás
`show.bs.toast`	Ez az esemény azonnal aktiválódik a `show`példánymetódus meghívásakor.
`shown.bs.toast`	Ez az esemény akkor indul el, amikor a pirítóst láthatóvá teszik a felhasználó számára.
`hide.bs.toast`	Ez az esemény azonnal elindul, amikor a `hide`példánymetódus meghívásra került.
`hidden.bs.toast`	Ez az esemény akkor indul el, amikor a pirítós elrejtése befejeződött a felhasználó elől.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})