Versus card
An arcade « character select » card: two subjects face to face, a bird as each fighter, stat bars from real data, and a « VS » between them.
import { VersusCard } from "@krizaka/ui/versus-card";Web uniquement — React, depuis @krizaka/ui/versus-card. Bêta : son API peut encore changer à une version mineure.
- Mobile · ✗ à construire. It comes with the native paper roles of the Cahier. issue #421
Pourquoi il est là. The tool sites (krizaka/krizaka-ui#548): Java's two-release face-off, the component and its alternative on ui.krizaka.com.
Quand l’utiliser
- To compare two releases of a tool, or a component and its alternative, on measured figures.
- To open a changelog or a « why this one » page with a playful, honest face-off.
Quand ne pas l’utiliser
- A feature-by-feature table of three subjects or more.À la place : Comparison table
- One subject and its numbers.À la place : Stat
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { VersusCard } from "@krizaka/ui/versus-card";Exemples
Two releases
Two releases of a package compared on bundle size and coverage.
A component and its alternative
Two ways to build a dialog, compared on measured figures.
Props
An arcade versus card: two subjects face to face, a bird each, stat bars from real data, a « VS » between them.
| Prop | Type | Défaut | Description |
|---|---|---|---|
labelrequis | string | — | The accessible name of the match: Krizaka UI 2.7 versus 2.6. |
leftrequis | Fighter | — | The subject on the left. |
rightrequis | Fighter | — | The subject on the right (its bird faces left). |
source | ReactNode | — | Where the figures come from, under the card. |
vs | ReactNode | VS | The mark between them. |
Accessibilité
- A named section; each fighter's stats are a description list, so every figure is text. The bars repeat the numbers and are hidden from assistive technology.
- The birds are decoration; the « VS » is real text.
- On a phone the fighters stack with the mark between them; nothing moves.
Bonnes pratiques
- Every bar is a real figure: pass the value, its maximum and the text the reader reads (
4.1 kB), and say where the figures come from insource. - The same stats, in the same order, on both sides: the card compares, it does not decide who wins.
- Choose the birds by the brand reference (the duck builds, the owl reads, the pigeon delivers), not by looks.
- Name the match for assistive technology with
label:Krizaka UI 2.7 versus 2.6.
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