Eksempler

Varianter

Vertikal/horisontal

Komponenten kan orienteres horisontalt eller vertikalt ettersom hvordan siden er bygd opp. Vi anbefaler sterkt å bruke vertikal variant da den passer bedre på mindre flater, eks på mobil.

Interactive

Man kan sette hele stepper til å ikke være interaktiv, eller steg for seg selv. Dette gir muligheten til å bygge opp en wizard-lignende flyt der fremtidige steg kan være "låst", mens tidligere steg er interaktive.

Completed

Alle steg har en prop `completed` som setter et checkmark der det tidligere var et tall. Dette kan brukes for å visuelt lettere la brukeren se hvilken steg de har fullført, og da hvilken de bør fullføre. Dette bør bare brukes som en visuell støtte-indikator.

Retningslinjer

Som lenke eller knapp

Stepper.Step er default en a-tag og brukes som lenke. Men basert på hvordan applikasjonen din er satt opp, eks typisk SPA kan en knapp funke bedre. Da kan man bruke `as`-proppen på steget for å overskrive taggen.

activeStep og onStepChange

Vi har valgt å 1-indeksere denne komponenten. Det vil si at activeStep forventer at første step er 1, og onStepChange vil returnere 1 når aktivert. Dette følger samme prinsipp som Pagination der stegene man ser visuelt er de samme man jobber med i kode. Dette aviker litt fra hvordan gamle StepIndicator/Stegindikator fungerte, så greit å dobbelsjekke koden når man migrerer.

Tokens