StatCard

Jedna liczba z etykietą, do rzędu wartości na górze pulpitu. Dodaj href albo onPress, gdy liczba prowadzi do pełnej listy.

StatCard

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: StatCard

Agents working now
2
Waiting for your decision
1
Open tasks
12
Up 4%vs last week
Your commits in 7 days
Loading
Agent tokens
Could not load the usage.

Noc, podgląd: StatCard

Agents working now
2
Waiting for your decision
1
Open tasks
12
Up 4%vs last week
Your commits in 7 days
Loading
Agent tokens
Could not load the usage.

Wysoki kontrast, podgląd: StatCard

Agents working now
2
Waiting for your decision
1
Open tasks
12
Up 4%vs last week
Your commits in 7 days
Loading
Agent tokens
Could not load the usage.

UżycieLink do sekcji Użycie

tsx

import { StatCard } from '@skribly/ui/surfaces'

tsx

<StatCard
  label="Open tasks"
  value={12}
  icon={<ListTodo />}
  hint="Across 3 projects"
  href="/tasks"
/>

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

Etykieta jest odczytywana przed wartością.
Z href lub onPress etykieta staje się linkiem, a celem jest cała karta; wartość jest odczytywana jako jej opis, a obwódka fokusa otacza kartę.
Ikona jest ukryta, a jej ton koloruje tylko jej kafelek. loading oznacza kartę jako zajętą i odczytuje loadingLabel; error pokazuje znak i tekst zamiast wartości.

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