Tosty
Powiadomienia push dla odwiedzających z toastem, lekkim i łatwo konfigurowalnym komunikatem ostrzegawczym.
Toasty to lekkie powiadomienia zaprojektowane w celu naśladowania powiadomień push, które zostały spopularyzowane przez mobilne i stacjonarne systemy operacyjne. Są zbudowane z flexboxem, dzięki czemu można je łatwo wyrównać i ustawić.
Przegląd
Co należy wiedzieć podczas korzystania z wtyczki toast:
- Jeśli budujesz nasz JavaScript ze źródeł, wymaga
util.js
to . - Tosty są włączane ze względu na wydajność, więc musisz je zainicjować samodzielnie .
- Pamiętaj, że to Ty odpowiadasz za pozycjonowanie tostów.
- Tosty zostaną automatycznie ukryte, jeśli nie określisz
autohide: false
.
Efekt animacji tego komponentu zależy od prefers-reduced-motion
zapytania o media. Zobacz zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .
Przykłady
Podstawowy
Aby zachęcić do rozszerzania się i przewidywania toastów, zalecamy nagłówek i treść. Używają nagłówków Toast display: flex
, co pozwala na łatwe wyrównanie treści dzięki naszym narzędziom marginesów i flexbox.
Tosty są tak elastyczne, jak potrzebujesz i mają bardzo mało wymaganych znaczników. Wymagamy co najmniej jednego elementu, aby zawierał „wypiekaną” treść i zdecydowanie zachęcamy do przycisku odrzucenia.
Przeświecający
Grzanki są również lekko przezroczyste, więc mieszają się z tym, na czym mogą się pojawić. W przypadku przeglądarek, które obsługują backdrop-filter
właściwość CSS, spróbujemy również zamazać elementy pod toastem.
Układanie
Gdy masz wiele tostów, domyślnie układamy je pionowo w czytelny sposób.
Umieszczenie
Umieszczaj tosty za pomocą niestandardowego kodu CSS, gdy ich potrzebujesz. Prawy górny róg jest często używany do powiadomień, podobnie jak górny środkowy. Jeśli masz zamiar pokazywać tylko jeden toast na raz, ustaw style pozycjonowania bezpośrednio na .toast
.
W przypadku systemów, które generują więcej powiadomień, rozważ użycie elementu opakowującego, aby można je było łatwo układać w stos.
Możesz również zainteresować się narzędziami flexbox, aby wyrównać tosty w poziomie i/lub w pionie.
Dostępność
Toasty mają być małymi przerwami dla odwiedzających lub użytkowników, więc aby pomóc osobom korzystającym z czytników ekranu i podobnych technologii wspomagających, należy zawinąć toasty w aria-live
regionie . Zmiany w aktywnych regionach (takie jak wstrzykiwanie/aktualizacja komponentu toastu) są automatycznie ogłaszane przez czytniki ekranu bez konieczności przesuwania fokusu użytkownika lub w inny sposób przerywania użytkownikowi. Dodatkowo uwzględnij, aria-atomic="true"
aby cały toast był zawsze ogłaszany jako pojedyncza (atomowa) jednostka, zamiast informowania o tym, co zostało zmienione (co może prowadzić do problemów, jeśli zaktualizujesz tylko część treści toastu lub jeśli wyświetlisz tę samą zawartość toastu w później). Jeśli potrzebne informacje są ważne dla procesu, np. lista błędów w formularzu, użyj komponentu alertuzamiast tostów.
Pamiętaj, że aktywny region musi być obecny w znacznikach przed wygenerowaniem lub zaktualizowaniem toastu. Jeśli dynamicznie wygenerujesz oba w tym samym czasie i wstawisz je na stronę, generalnie nie zostaną one ogłoszone przez technologie wspomagające.
Musisz również dostosować poziom role
i aria-live
w zależności od treści. Jeśli jest to ważna wiadomość, taka jak błąd, użyj role="alert" aria-live="assertive"
, w przeciwnym razie użyj role="status" aria-live="polite"
atrybutów.
Ponieważ treść, którą wyświetlasz, zmienia się, pamiętaj o zaktualizowaniu delay
limitu czasu , aby zapewnić ludziom wystarczająco dużo czasu na przeczytanie toastu.
Korzystając z autohide: false
, musisz dodać przycisk zamykania, aby umożliwić użytkownikom odrzucenie toastu.
zachowanie JavaScript
Stosowanie
Inicjuj tosty za pomocą JavaScript:
Opcje
Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-
, jak w data-animation=""
.
Nazwa | Rodzaj | Domyślna | Opis |
---|---|---|---|
animacja | logiczne | PRAWDA | Zastosuj zanikające przejście CSS do toastu |
automatyczne chowanie | logiczne | PRAWDA | Automatycznie ukryj tosty |
opóźnienie | numer | 500 |
Opóźnienie ukrywania tostów (ms) |
Metody
Metody asynchroniczne i przejścia
Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .
Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji .
$().toast(options)
Dołącza moduł obsługi tostów do kolekcji elementów.
.toast('show')
Ujawnia toast elementu. Wraca do dzwoniącego przed faktycznym wyświetleniem toastu (tj. przed shown.bs.toast
wystąpieniem zdarzenia). Musisz ręcznie wywołać tę metodę, zamiast tego twój tost się nie pokaże.
.toast('hide')
Ukrywa toast elementu. Wraca do dzwoniącego przed faktycznym ukryciem toastu (tj. przed hidden.bs.toast
wystąpieniem zdarzenia). Musisz ręcznie wywołać tę metodę, jeśli zrobiłeś autohide
to false
.
.toast('dispose')
Ukrywa toast elementu. Twój toast pozostanie w DOM, ale nie będzie już wyświetlany.
Wydarzenia
Typ wydarzenia | Opis |
---|---|
pokaż.bs.tosty | To zdarzenie jest wyzwalane natychmiast po show wywołaniu metody wystąpienia. |
pokazano.bs.tosty | To zdarzenie jest uruchamiane, gdy toast jest widoczny dla użytkownika. |
ukryj.bs.tosty | To zdarzenie jest wywoływane natychmiast po hide wywołaniu metody wystąpienia. |
ukryta.bs.tosty | To zdarzenie jest uruchamiane po zakończeniu ukrywania toastu przed użytkownikiem. |