Composants
Quota meter
Space or time used against a plan: the figure in words, a meter that turns amber at 80 % and red at 95 %, the sentence that says what to do, the small figures and the way out.
import { QuotaMeter } from "@krizaka/ui/quota-meter";Web uniquement — React, depuis @krizaka/ui/quota-meter. Bêta : son API peut encore changer à une version mineure.
- Mobile · ✗ à construire. The native twin is a
Cardwith aMeter; it follows when a mobile screen shows a quota (Yomizaka's library). issue #275
Pourquoi il est là. Yomizaka's library quota and Akinaza's plan (krizaka-ui#515).
Quand l’utiliser
- A creator's or an owner's storage, minutes or credits against their plan.
- Any limit the person can run into and should hear about before.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { QuotaMeter } from "@krizaka/ui/quota-meter";Exemples
Storage at 86 %
Used in words, an amber meter, the sentence, minutes and today's uploads, the way to manage.
Full and paused
A red meter, the sentence, uploads on hold and the platform paused.
Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
maxrequis | number | null | — | The limit; null for no limit (no meter is drawn). |
meterLabelrequis | string | — | The meter's accessible name. |
titlerequis | ReactNode | — | What is measured (Storage), with an optional icon before it. |
usedTextrequis | string | — | « 3.2 GB of 10 GB », said once for the eye and once for the meter's value. |
valuerequis | number | — | Used so far, in the unit of max. |
action | ReactNode | — | The way out, shown under the figures (a link to manage). |
compact | boolean | false | Leaves out the footer (the small figures and the action): the title, the used line, the meter, the sentence and the notices stay. |
details | readonly ReactNode[] | [] | Small figures under the meter (minutes, today's uploads). Left out when the card is compact. |
icon | ReactNode | — | A glyph before the title (decorative). |
level | QuotaLevel | ok | Where the level stands: tones the sentence and gives an alarming one a status role. |
notices | readonly ReactNode[] | [] | More sentences that matter (« 2 uploads on hold », « uploads are paused »), each a status. |
plan | ReactNode | — | The plan's name, on the right of the title. |
statusText | ReactNode | — | The sentence for that level (« You are close to your limit »). |
Accessibilité
- The card is a region named by its title.
- The meter has its own accessible name and value text; an alarming sentence is
role=status.
Bonnes pratiques
- Say the figure in words (
3.2 GB of 10 GB): the colour is never the only signal. - Give the sentence for each level (
warning,critical,full): the alarming ones are read as a status. - Put the way out (
action) in the card, not in a banner elsewhere. max={null}for an unlimited plan: the figure stays, the meter goes.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub