Komunikaty i stany
Status, komunikaty i ładowanie. Sukces, informacja, ostrzeżenie i błąd mają jeden system: każdy ma ton, kształt ikony i słowo, więc kolor nigdy sam nie niesie znaczenia. Komunikaty, które przychodzą później, są odczytywane przez regiony na żywo typu polite, a błędy blokujące przez regiony typu assertive.
Strony: 13, eksporty: 17
- Badge
- SeverityBadge
- StatusDot
- Alert
- Banner
- AiDisclosure
- FlashMessages
- Spinner
- Skeleton
- SkeletonText
- SkeletonRow
- EmptyState
- Meter
- ProgressBar
- ToastProvider
- ToastViewport
- useToast
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { Badge, SeverityBadge, StatusDot, Alert, … } from '@skribly/ui/feedback'Strony tej grupyLink do sekcji Strony tej grupy
- BadgeKrótka etykieta stanu albo liczby, taka jak Draft lub Failed. Wybierz ją dla stałych faktów w wierszach i nagłówkach; gdy stan zmienia się na żywo, użyj StatusDot.Badge
- SeverityBadgePoziom ustalenia albo incydentu, od krytycznego do informacyjnego. Wybierz ją zawsze, gdy pozycje są uszeregowane według ważności.SeverityBadge
- StatusDotMała kropka i słowo dla stanu procesu, usługi albo osoby. Wybierz ją dla list rzeczy, które działają.StatusDot
- AlertKomunikat wewnątrz treści, obok tego, czego dotyczy. Wybierz go dla wyniku, który zostaje na ekranie, takiego jak podsumowanie błędów na górze formularza; dla wiadomości, które mogą minąć, wybierz toast.Alert
- BannerPasek na pełną szerokość u góry strony albo panelu dla stanu, który trwa, takiego jak tryb tylko do odczytu albo utrata połączenia.Banner
- AiDisclosureNotatka, która mówi, że tekst wygenerował model: słowa "Wygenerowane przez AI", model, dostawca i link do tego, co jest wysyłane. Pokaż ją przy każdej odpowiedzi lub tekście napisanym przez model, w asystencie i w każdej innej funkcji AI. Mówi, skąd pochodzi tekst, i nic o tym, czy jest trafny.AiDisclosure
- FlashMessagesKomunikaty, które serwer zostawił dla następnej strony, takie jak „Saved” po przekierowaniu albo błędy formularza. Wybierz je dla wyników renderowanych na serwerze; dla wyników akcji w przeglądarce użyj useToast.FlashMessages
- SpinnerMały pierścień dla oczekiwania o nieznanej długości, takiego jak ładowanie listy. Wybierz ProgressBar, gdy znany jest udział wykonanej pracy.Spinner
- SkeletonZastępniki, które trzymają miejsce treści podczas ładowania, aby strona nie skakała. Wybierz SkeletonRow dla list i tabel, SkeletonText dla akapitów, a Skeleton dla każdego innego kształtu.Skeleton, SkeletonText, SkeletonRow
- EmptyStateTo, co wypełnia widok, który nie ma nic do pokazania: jeszcze nic, brak wyników albo nie udało się załadować. Zawsze podaj następny krok, taki jak utworzenie pierwszej pozycji, wyczyszczenie filtrów albo ponowna próba.EmptyState
- MeterPoziom w znanym zakresie, taki jak zajęte miejsce albo wynik. Dla pracy, która zmierza do końca, wybierz ProgressBar.Meter
- ProgressBarPostęp zadania ku końcowi, taki jak wysyłanie albo import. Pomiń value, gdy długość jest nieznana.ProgressBar
- ToastsKrótkie komunikaty o wyniku akcji, pokazywane na brzegu ekranu. Wybierz toast dla wiadomości, które mogą minąć, takich jak „Saved”. Wyniki, które muszą zostać, należą do Alert. useToast() pokazuje toast z dowolnego miejsca pod providerem, a container renderuje stos wewnątrz panelu z motywem.ToastProvider, ToastViewport, useToast