Goal gauge

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { GoalGauge } from "@krizaka/ui/goal-gauge";

Exemples

Props

Accessibilité

• role="meter" named by label, with aria-valuenow, aria-valuemax (the steps) and aria-valuetext.
• The segments are drawn, not read: the value is in words, and lit steps are not told by colour alone (the count says it).
• The steps light once in a stage and never under prefers-reduced-motion.

Bonnes pratiques

• Two to twenty-four steps: beyond, use a Meter.
• Always say the value in words (valueText: “6 of 10 backers”).
• Pair it with the action that moves it (back the challenge, book a seat).

Composants liés

• MeterA measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.
• ProgressHow far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.
• StepperThe steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.
• AchievementSomething done, and what it replaced: a milestone reached, a dare completed, a problem out of the way — on one grid of hairlines in a list, their badges arriving one by one; with three line emblems.

Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub