MetricTile
Jedna kluczowa liczba ze zmianą i niedawnym trendem, do rzędu kafelków na górze raportu. Wybierz StatCard z grupy surfaces, gdy kafelek prowadzi do pełnego widoku.
- MetricTile
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: MetricTile
- Visits38,412Up22%, bettervs previous 28 daysLast 28 days
- Median load time1.4 sDown12%, better
- Sign-ups
- Build minutes
Could not load build minutes.
Check the build connection
Noc, podgląd: MetricTile
- Visits38,412Up22%, bettervs previous 28 daysLast 28 days
- Median load time1.4 sDown12%, better
- Sign-ups
- Build minutes
Could not load build minutes.
Check the build connection
Wysoki kontrast, podgląd: MetricTile
- Visits38,412Up22%, bettervs previous 28 daysLast 28 days
- Median load time1.4 sDown12%, better
- Sign-ups
- Build minutes
Could not load build minutes.
Check the build connection
UżycieLink do sekcji Użycie
import { MetricTile } from '@skribly/ui/charts'<MetricTile
label="Visits"
value="38,412"
delta={<Delta value={0.22} directionLabels={directions} comparison="vs previous 28 days" />}
sparkline={last28}
sparklineLabel="Visits, last 28 days: rising"
hint="Last 28 days"
/>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ść
- Zwykły tekst w kolejności czytania: etykieta, wartość, zmiana, trend, podpowiedź.
- Sparkline jest jednym obrazem nazwanym przez sparklineLabel.
- Ładowanie oznacza kafelek jako zajęty i odczytuje loadingLabel; błąd pokazuje ikonę i słowa.
- Wartość zmniejsza się w wąskim kafelku, a długi tekst się zawija, więc cztery kafelki mieszczą się po dwa w rzędzie na telefonie.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.