Przejdź do treści

ScoreRing

Wynik względem znanego maksimum, na przykład wynik audytu na 100 punktów. Wybierz go dla od jednego do czterech głównych wyników; dla poziomów na liście użyj Meter z grupy feedback.

  • ScoreRing

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ScoreRing

PerformanceGood
AccessibilityNeeds work
Best practicesPoor
SearchNot measured yet
Checklist

Noc, podgląd: ScoreRing

PerformanceGood
AccessibilityNeeds work
Best practicesPoor
SearchNot measured yet
Checklist

Wysoki kontrast, podgląd: ScoreRing

PerformanceGood
AccessibilityNeeds work
Best practicesPoor
SearchNot measured yet
Checklist

UżycieLink do sekcji Użycie

tsx
import { ScoreRing } from '@skribly/ui/charts'
tsx
<ScoreRing value={92} label="Accessibility" showLabel ratingLabels={{ good: 'Good', fair: 'Needs work', poor: 'Poor' }} />

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

  • Miernik nazwany przez label, z wartością i zakresem.
  • Ocena jest słowem z własnym kształtem ikony, powiązanym jako opis, więc kolor nigdy nie jest jedynym sygnałem.
  • Bez wyniku pierścień jest pusty, pokazuje kreskę i odczytuje emptyLabel.
  • Pierścień animuje się tylko wtedy, gdy ruch nie jest ograniczony, a w trybie wymuszonych kolorów używa Highlight.

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

Szukaj na stronie

Strzałki przenoszą między wynikami, Enter otwiera, Esc zamyka. Ctrl K /