DokumentacjaKomponenty
Toast i alert
Cztery tony; kanał wynika ze źródła komunikatu.
Zapisano zmiany.
Profil dziecka został zaktualizowany.
Usunięto z ulubionych.
Szkółka skateboardingu dla początkujących
Usunięto z ulubionych.
Szkółka skateboardingu dla początkujących
- 1Ikona tonu 20 px: ptaszek dla sukcesu, koło z wykrzyknikiem dla reszty
- 2Tytuł 500 i opis, 14 / 20 px
- 3Opcjonalna akcja: przycisk tekstowy 600, 44 px wysokości
- 4Zamknij: okrągły cel 44 px, tylko toast w rogu
- 5Kontener: promień 12 px, ramka 2 px w tonie, cień toastu
Warianty
Cztery tony zbudowane tak samo: tło 50, ramka 200 lub 300, ikona 500 lub 600, tekst 800 jednego koloru. Kanał wynika ze źródła komunikatu: zdarzenie niezwiązane z polem trafia do toastu w rogu; stan ekranu zostaje w treści jako toast w treści albo alert.
Toast (powiadomienie w rogu)
Zapisano zmiany.
Profil dziecka został zaktualizowany.
Nowa wersja regulaminu.
Przeczytaj, co się zmieniło od 1 października.
Sesja wygaśnie za 2 minuty.
Zapisz zmiany, żeby ich nie stracić.
Błąd logowania przez Google.
Spróbuj ponownie lub użyj adresu e-mail.
Toast w treści
Adres pokażemy rodzicom po publikacji.
Do tego czasu widzą tylko dzielnicę.
Nie udało się pobrać zajęć.
Sprawdź połączenie i spróbuj jeszcze raz.
Alert w treści
Nieprawidłowy e-mail lub hasło.
Sprawdź oba pola i spróbuj ponownie.
Liczebność grupy zmienisz później w ustawieniach.
Stany
Sam komunikat nie ma stanów; mają je jego kontrolki. Akcja na hover dostaje tło w odcieniu koloru tekstu, zamknięcie jasne tło. Obie pokazują pierścień fokusu. Hover i fokus są poniżej wymuszone.
Klient dodany.
Wysłaliśmy mu zaproszenie.
Klient dodany.
Wysłaliśmy mu zaproszenie.
Klient dodany.
Wysłaliśmy mu zaproszenie.
API
Toast pozycjonuje kontener aplikacji; komponent rysuje tylko komunikat.
Toast
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
variant | "info" | "success" | "warning" | "error" | "info" | Ton: tło 50, ramka 200 / 300, ikona 500 / 600, tekst 800. |
inline | boolean | false | Komunikat w treści: bez zamykania, akcja poniżej 768 px schodzi pod tekst. |
title | tekst | – | Pierwsza linia, waga 500. |
description | tekst | – | Opcjonalna druga linia: co zrobić dalej. |
action | { label, onClick } | – | Opcjonalna akcja tekstowa w osobnej kolumnie, np. „Cofnij”. |
onClose + closeLabel | funkcja + tekst | – | Pokazują przycisk zamknięcia 44 px (tylko toast w rogu); etykieta nazywa go dla czytnika. |
icon | ikona | – | Zastępuje domyślną ikonę tonu. |
InlineAlert
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
tone | "error" | "info" | "warning" | "success" | "error" | Error dla błędów; pozostałe dla informacji, która nie jest błędem. Info jest neutralnym slate. |
title | tekst | – | Opcjonalna pogrubiona pierwsza linia. |
icon | ikona | – | Ikona z aplikacji; kolor dziedziczy ton. |
children | treść | – | Treść komunikatu; zostaje na ekranie, nie da się jej zamknąć. |
Dostępność
- Error ma role alert, więc czytnik przerywa i czyta go od razu; success, info i warning mają role status i czekają na przerwę.
- Przycisk zamknięcia ma nazwę tekstową (closeLabel) i cel 44 × 44 px; akcja ma 44 px wysokości.
- Znaczenie niesie tytuł i opis, nigdy sam kolor albo ikona.
- Kontrast tekstu: success 6,8:1, info 15,7:1, warning 6,8:1, error 7,6:1; alert info 14:1.
- Kontrast ikon jest niższy: error 4,4:1, success 3,1:1, ale ostrzeżenie amber-500 na amber-50 tylko 2,1:1. Ikona jest dekoracyjna (aria-hidden), a komunikat niesie tekst, więc wymóg jest spełniony; ciemniejsza ikona ostrzeżenia byłaby jednak lepszym wyborem.
Dobre praktyki
Nie udało się pobrać zajęć.
Kod pocztowy jest nieprawidłowy.