Dane
Tabele, listy, drzewa i osie czasu do pokazywania rekordów. Każda kolekcja ma te same stany ładowania, braku danych i błędu, a każda interaktywna działa na React Aria, który zapewnia obsługę klawiatury, zaznaczanie i wsparcie czytników ekranu. Budowane z celem WCAG 2.2 AA.
Strony: 11, eksporty: 12
- Table
- DataTable
- BulkActionBar
- SortHeader
- List
- ListItem
- VirtualList
- TreeView
- TreeRow
- Timeline
- TimelineItem
- KeyValueList
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 { Table, DataTable, BulkActionBar, SortHeader, … } from '@skribly/ui/data'Strony tej grupyLink do sekcji Strony tej grupy
- TableTabela tylko do odczytu na natywnym znaczniku tabeli, z podpisem, nagłówkami wierszy i opcjonalnym sortowaniem. Wybierz ją dla raportów i podsumowań; na telefonie albo przewija się we własnym polu, albo układa każdy wiersz w kartę z etykietami.Table
- DataTable with bulk actionsInteraktywna siatka dla rekordów, które ludzie zaznaczają, sortują i otwierają: przyklejony nagłówek, kolumny liczbowe i akcji oraz zaznaczony wiersz oznaczony podbarwieniem i linią z przodu. BulkActionBar leży nad nią i działa na zaznaczeniu.DataTable, BulkActionBar
- DataTable statesTe same trzy stany, które pokazuje każda kolekcja z tej grupy zamiast wierszy: brak czegokolwiek do pokazania, ładowanie i błąd blokujący.DataTable
- SortHeaderEtykieta i strzałka kierunku sortowalnej kolumny. DataTable i Table już go używają; użyj go osobno dla własnego nagłówka, z onSort, gdy ma być przyciskiem.SortHeader
- ListInteraktywna 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
- List reorderingPrzekaż hooki przeciągania i upuszczania z React Aria, aby pozwolić zmieniać kolejność pozycji myszą, dotykiem lub klawiaturą.List, ListItem
- List statesStany pustej listy, ładowania i błędu pokazane zamiast pozycji, takie same jak w tabelach i drzewach.List
- VirtualListList, 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
- TreeViewHierarchia, 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
- TimelineUporządkowana historia zdarzeń z informacją, kto i kiedy, na przykład zmiany rekordu albo kroki wdrożenia. Każdy ton ma własną ikonę i słowo, nigdy sam kolor.Timeline, TimelineItem
- KeyValueListOpisane fakty o jednej rzeczy, takie jak dane konta albo serwera. Układ inline stawia etykiety obok wartości, gdy jest miejsce, a na telefonie układa je w stos; columns mieści więcej faktów na szerokich ekranach.KeyValueList