VirtualList

List, który renderuje tylko to, co jest na ekranie, dla tysięcy wyników, takich jak wyszukiwanie plików. Podaj wysokość; pozycje są mierzone, więc zawinięty tekst i zwarta gęstość nadal się mieszczą.

VirtualList

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: VirtualList

Noc, podgląd: VirtualList

Wysoki kontrast, podgląd: VirtualList

UżycieLink do sekcji Użycie

tsx

import { VirtualList } from '@skribly/ui/data'

tsx

<VirtualList aria-label="Files" items={files} className="h-72">
  {(file) => <ListItem id={file.id} title={file.name} meta={file.size} truncate />}
</VirtualList>

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ść

Zachowuje się jak List: klawisze strzałek, Home, End, Page Up i Page Down docierają do pozycji, które nie są jeszcze wyrenderowane, a siatka zgłasza pełną liczbę przez aria-rowcount, a każda pozycja swoje miejsce.

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