FilterChips

Szybkie filtry nad listą, z opcjonalnym licznikiem przy każdym. Tryb multiple przełącza każdy chip osobno; tryb single wybiera jeden. ChipCount to plakietka z licznikiem, używana też wewnątrz kart.

FilterChips
ChipCount

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: FilterChips

Noc, podgląd: FilterChips

Wysoki kontrast, podgląd: FilterChips

UżycieLink do sekcji Użycie

tsx

import { FilterChips, ChipCount } from '@skribly/ui/navigation'

tsx

<FilterChips label="Status" selected={status} onChange={setStatus} clearLabel="Clear filters"
  chips={[{ id: 'open', label: 'Open', count: 42, countLabel: '42 issues' }]} />
<ChipCount value={1280} max={999} label="1280 issues" />

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

Tryb multiple to zestaw przycisków przełączanych z aria-pressed; tryb single to grupa przycisków opcji.
Aktywny chip dostaje znacznik i ramkę w kolorze akcentu, więc stan nie opiera się na kolorze.
Liczniki są odczytywane jako ich etykieta, na przykład „42 issues”.
Przycisk czyszczenia zwraca fokus na chipy, gdy zniknie.
Chipy zawijają się na wąskich ekranach.

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