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 ehhez
util.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.
Áttetsző
A pirítós is enyhén áttetsző, így mindenre keveredik, ami felett megjelennek. A backdrop-filter
CSS-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.
Halmozás
Ha több pirítósa van, alapértelmezés szerint függőlegesen, olvasható módon helyezi el őket.
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
.
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.
A flexbox segédprogramokkal a pirítósokat vízszintesen és/vagy függőlegesen igazíthatja.
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-live
ré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.
role
A és a szintet is módosítani kell aria-live
a 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 delay
időtúllépést , hogy az embereknek elegendő idejük legyen elolvasni a pohárköszöntőt.
A használatakor autohide: false
hozzá kell adni egy bezárás gombot, hogy a felhasználók elvethessék a pirítóst.
JavaScript viselkedés
Használat
Pirítósok inicializálása JavaScript segítségével:
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.toast
esemény bekövetkezte előtt). Ezt a módszert manuálisan kell meghívnia, ehelyett a pirítós nem jelenik meg.
.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.toast
esemény bekövetkezte előtt). Ezt a metódust manuálisan kell meghívnia, ha ezt autohide
tette false
.
.toast('dispose')
Elrejti egy elem pirítósát. A pirítós a DOM-on marad, de többé nem jelenik meg.
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. |
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 hide pé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. |