SortHeader

Etykieta 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

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: SortHeader

UnsortedAscendingDescending

Noc, podgląd: SortHeader

UnsortedAscendingDescending

Wysoki kontrast, podgląd: SortHeader

UnsortedAscendingDescending

UżycieLink do sekcji Użycie

tsx

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

tsx

<th aria-sort={direction ?? 'none'}>
  <SortHeader direction={direction} onSort={toggle}>Name</SortHeader>
</th>

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

Strzałka jest ukryta przed czytnikami ekranu; otaczający nagłówek kolumny podaje kierunek przez aria-sort.
Z onSort jest przyciskiem o celu 24 px, widocznej obwódce fokusa i etykiecie jako nazwie.

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