Score gauge
Ein Wert auf einem 270°-Bogen in der Primärfarbe, mit Icon in der Mitte und der Veränderung darunter; zeichnet sich beim Erscheinen ein.
import { ScoreGauge } from "@/forma/data/dash-card";Base
In FORMA
- Liegt in
kit/data/dash-card.tsxund ist über@/forma/data/dash-carderreichbar. - FORMAs eigener Baustein, auf Arc gebaut: Arcs Buttons, Felder und Federn darunter, Farbe, Ecken, Höhen und Tempo aus der Richtung.
Usage
import { ScoreGauge } from "@/forma/data/dash-card";API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | – | der Wert |
max | number | 100 | das Maximum |
icon | ComponentType | – | ein Icon in der Mitte |
delta | string | – | Veränderung unter dem Bogen |
size | number | 102 | Kantenlänge in px |
label | string | „value von max“ | Text für Screenreader |
Motion
- Der Bogen zeichnet sich beim Erscheinen auf Arcs smooth spring ein; die Spur liegt in der blassesten Stufe der Schriftfarbe, der Wert läuft von einer hellen Stufe der Primärfarbe in die Primärfarbe.
Herkunft
- Aus dem Xaver Broker Cockpit (Figma), gezeichnet statt als Bild exportiert, damit er jeder Richtung folgt.
Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.