List

Interaktywna lista rekordów z ikoną, tytułem, opisem, metadanymi na końcu i akcjami wiersza. Wybierz ją zamiast tabeli, gdy każdy rekord czyta się jako jedna linia tekstu, a nie jako kolumny.

List
ListItem

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: List

AtlasDocumentation site and searchLive2 min ago

Beacon notifications service, with a deliberately long name to show wrappingEmail and push delivery for every product, retried with backoffDegraded1 h ago

CometInternal analyticsPausedYesterday

Noc, podgląd: List

AtlasDocumentation site and searchLive2 min ago

Beacon notifications service, with a deliberately long name to show wrappingEmail and push delivery for every product, retried with backoffDegraded1 h ago

CometInternal analyticsPausedYesterday

Wysoki kontrast, podgląd: List

AtlasDocumentation site and searchLive2 min ago

Beacon notifications service, with a deliberately long name to show wrappingEmail and push delivery for every product, retried with backoffDegraded1 h ago

CometInternal analyticsPausedYesterday

UżycieLink do sekcji Użycie

tsx

import { List, ListItem } from '@skribly/ui/data'

tsx

<List aria-label="Projects" items={projects} selectionMode="multiple">
  {(p) => (
    <ListItem id={p.id} title={p.name} description={p.description}
      meta={<Badge tone="ok">Live</Badge>}
      actions={<IconButton label={`Deploy ${p.name}`} size="sm"><Rocket aria-hidden="true" /></IconButton>} />
  )}
</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ść

Jeden przystanek w kolejności Tab; strzałka w górę i w dół przechodzi między pozycjami, Home i End skaczą, wpisywanie znajduje pozycję, Spacja zaznacza, a Enter uruchamia onAction.
Strzałka w prawo dociera do przycisków wewnątrz pozycji.
Zaznaczone pozycje mają pole wyboru nazwane pozycją, podbarwienie i linię z przodu, a w trybie wymuszonych kolorów systemowe wyróżnienie.
Tytuły się zawijają przy dużym powiększeniu, chyba że ustawiono truncate.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.