Step progress
The head of a multi-step flow — a sign-up, a profile to fill: back, segments that fill, the position in words.
Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The onboarding of a dating app: name, birth date, photos, interests, location.
- A checkout in several steps.
Quand ne pas l’utiliser
- For the steps of a running process.À la place : Stepper
- For a first launch's promises.À la place : Onboarding
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { StepProgress } from "@krizaka/ui/step-progress";Exemples
Sign-up
Step 2 of 5, back and skip.
Props
The head of a sign-up or a profile to fill: back, segments that fill, the position in words.
| Prop | Type | Défaut | Description |
|---|---|---|---|
labelrequis | (step: number, total: number) => string | — | The position in words: (n, total) => "Step " + n + " of " + total — passed translated. |
steprequis | number | — | The current step, from 1. |
totalrequis | number | — | How many steps. |
back | ReactNode | — | The back link or button (a Button), at the left. |
className | string | — | Classes merged on the root. |
trailing | ReactNode | — | At the right: a Skip link. |
Accessibilité
- A
progressbarnamed and valued by the position in words.
Bonnes pratiques
- Five steps or fewer; let people skip what is optional.
- Keep the position in words (
label).
Composants liés
Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Segmented
A segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.
Stepper
The 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.