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 + MobileBêtaNavigation

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

Pourquoi il est là. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: the head of their sign-up and onboarding flows.

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 tailwindcss

Styles

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

Importer

import { StepProgress } from "@krizaka/ui/step-progress";

Exemples

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
`label`requis	`(step: number, total: number) => string`	—	The position in words: `(n, total) => "Step " + n + " of " + total` — passed translated.
`step`requis	`number`	—	The current step, from 1.
`total`requis	`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 progressbar named 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).

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