List states
Stany pustej listy, ładowania i błędu pokazane zamiast pozycji, takie same jak w tabelach i drzewach.
- List
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: List states
No projects yet.
Could not load projects.
Noc, podgląd: List states
No projects yet.
Could not load projects.
Wysoki kontrast, podgląd: List states
No projects yet.
Could not load projects.
UżycieLink do sekcji Użycie
import { List } from '@skribly/ui/data'<List aria-label="Projects" items={items} isLoading={loading} loadingLabel="Loading projects"
error={failed ? 'Could not load projects.' : undefined} emptyState="No projects yet.">
{(p) => <ListItem id={p.id} title={p.name} />}
</List>Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Ładowanie jest statusem typu polite, błąd komunikatem typu assertive z ikoną i słowami, a pusty stan zostaje wewnątrz nazwanej listy.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.