Intro
Stepper kan brukes for å indikere hvor brukeren er i en prosess. Kan brukes om navigasjons mønster mellom steg, eller for en visuell guide på progresjon. Selve komponenten bør være et supplement til andre mønstre eller indikatorer, og bør ikke være eneste måte å navigere en løsning på.
Egnet til:
- Vise brukeren hvor langt de har kommet i en brukerreise
- Spørreundersøkelser
- Søknadsprosess med flere steg
Uegnet til:
- Eneste måte å navigere på
Eksempler
Vi anbefaler å ikke bruke horisontal stepper, spesielt på eksterne flater. Dette er for å bedre støtte mobilenheter.
Med hjelp av interactive og completed kan man bygge opp wizard-lignende løsninger.
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
Token | Fallback |
---|---|
--ac-stepper-text | --a-surface-action |
--ac-stepper-line | --a-border-default |
--ac-stepper-line-completed | --a-border-selected |
--ac-stepper-non-interactive | --a-text-subtle |
--ac-stepper-active | --a-text-action-selected |
--ac-stepper-active-bg | --a-surface-action-selected |
--ac-stepper-active-border | --a-border-action-selected |
--ac-stepper-active-text | --a-text-on-action |
--ac-stepper-hover-bg | --a-surface-action-subtle-hover |
--ac-stepper-non-interactive-completed-bg | --a-surface-subtle |
--ac-stepper-non-interactive-line-completed | --a-border-strong |
--ac-stepper-non-interactive-active | --a-text-default |
--ac-stepper-non-interactive-active-bg | --a-surface-inverted |
--ac-stepper-non-interactive-active-border | --a-surface-inverted |
--ac-stepper-non-interactive-active-text | --a-text-on-inverted |
--ac-stepper-active-completed | --a-text-action-selected |
--ac-stepper-non-interactive-active-completed | --a-text-default |