TreeView
Hierarchia, taka jak pliki albo zagnieżdżone sekcje, z ikoną folderu, która się otwiera, plakietkami i akcjami wiersza. Wybierz ją, gdy ważna jest głębokość; dla płaskich rekordów użyj List.
- TreeView
- TreeRow
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: TreeView
src
actions
data
README.md
a-file-with-a-very-long-name-that-is-cut-to-one-line.config.ts
Guides
Getting started
DeployingDraft
Changelog
Noc, podgląd: TreeView
src
actions
data
README.md
a-file-with-a-very-long-name-that-is-cut-to-one-line.config.ts
Guides
Getting started
DeployingDraft
Changelog
Wysoki kontrast, podgląd: TreeView
src
actions
data
README.md
a-file-with-a-very-long-name-that-is-cut-to-one-line.config.ts
Guides
Getting started
DeployingDraft
Changelog
UżycieLink do sekcji Użycie
import { TreeView, TreeRow } from '@skribly/ui/data'<TreeView aria-label="Files" selectionMode="single">
<TreeRow id="src" title="src" icon={<Folder aria-hidden="true" />} expandedIcon={<FolderOpen aria-hidden="true" />}>
<TreeRow id="index" title="index.ts" meta={<Badge tone="warn">Modified</Badge>} />
</TreeRow>
</TreeView>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ść
- Siatka drzewa z aria-level i aria-expanded na każdym wierszu.
- Strzałka w górę i w dół przesuwa, w prawo otwiera gałąź albo wchodzi do niej, w lewo ją zamyka albo wraca do rodzica, wpisywanie przeskakuje do wiersza, a Enter lub Spacja zaznacza.
- Strzałka rozwijania ma zlokalizowaną nazwę Rozwiń albo Zwiń z React Aria i w tekście od prawej do lewej wskazuje w przeciwną stronę.
- Wcięcie przestaje rosnąć po ośmiu poziomach, więc głębokie drzewa mieszczą się na telefonie.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.