Source

Pirítósok

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

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:

  • Ha a JavaScriptet forrásból készíti, akkor ehhezutil.js .
  • A pirítósok teljesítménye miatt engedélyezettek, ezért Önnek kell inicializálnia őket .
  • Felhívjuk figyelmét, hogy a pirítósok elhelyezéséért Ön a felelős.
  • 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.

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

Áttetsző

A pirítós is enyhén áttetsző, így mindenre keveredik, ami felett megjelennek. A backdrop-filterCSS-tulajdonságot támogató böngészők esetében megkíséreljük elhomályosítani az elemeket egy pohárköszöntő alatt.

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

Halmozás

Ha több pirítósa van, alapértelmezés szerint függőlegesen, olvasható módon helyezi el őket.

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

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.

Bootstrap 11 perccel ezelőtt
Helló Világ! Ez egy pohárköszöntő üzenet. 
<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>

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.

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

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

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

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. Ezenkívül 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 a változást 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őpont). 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 az embereknek elegendő idejük legyen elolvasni a pohárköszöntőt.

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

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

<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 viselkedés

Használat

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

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

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-következőhöz: data-animation="".

Név típus Alapértelmezett Leírás
élénkség logikai érték igaz Alkalmazzon CSS-halványítást a pirítósra
automatikus elrejtés logikai érték igaz A pirítós automatikus elrejtése
késleltetés szám 500 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 .

$().toast(options)

Pirítós kezelőt csatlakoztat egy elemgyűjteményhez.

.toast('show')

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.

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

.toast('hide')

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.

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

.toast('dispose')

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

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

Események

Esemény típus Leírás
show.bs.toast Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
mutatott.bs.pirítós Ez az esemény akkor indul el, amikor a pirítóst láthatóvá teszik a felhasználó számára.
elrejteni.bs.pirítós Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett.bs.pirítós Ez az esemény akkor indul el, amikor a pirítós elrejtése befejeződött a felhasználó elől. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})