Stepper
Release dato: 12.07.2024
Sist oppdatert: –
Stepper brukes til å vise hvor langt brukeren har kommet i en stegvis prosess og hva som gjenstår. Den gir en visuell representasjon av fremdriften ved å dele opp prosessen i logiske trinn. Stepper brukes ofte i skjemaer, spørreundersøkelser eller navigasjon som krever flere steg.
Live demo
Relaterte komponenter
Når du ikke trenger klikkbar navigasjon mellom steg
Bytt mellom innhold der rekkefølgen ikke er lineær
Viser brukeren en hierarkisk struktur på tvers av sider
Varianter
| Variant | Bruk |
|---|---|
| Vertikal | Passer best på smale skjermer eller når siden er bygd opp i høyden |
| Horisontal | Brukes når innholdet i ett trinn avhenger av et tidligere trinn |
Retningslinjer for bruk
Bruk stepper når
- du vil hjelpe brukeren å forstå hvor langt de er kommet i en prosess
- prosessen har flere logiske steg (3–8 steg anbefales)
- det er behov for en visuell representasjon av fremdriften
Unngå stepper når
- prosessen er kort og enkel (bruk heller progressbar)
- du bare trenger å vise fremdrift uten klikkbar navigasjon
Navigasjon
Stepper kan brukes som navigasjon, men skal aldri være eneste måte å navigere på. Brukeren må alltid ha flere måter å bevege seg frem og tilbake.
Tekst og innhold
Stegene bør ha korte og beskrivende titler. Lange titler blir vanskelige å lese, spesielt i horisontale stepper.
Gjør slik
Unngå
Responsivitet
Stepper tilpasser seg tilgjengelig plass.
- Vertikal stepper fungerer godt på smale skjermer
- Horisontal stepper passer best på større flater
Husk å test at alle trinn vises tydelig på ulike skjermstørrelser og zoom-nivåer.
Universell utforming
Ikke bruk stepper som hovednavigasjon
En stepper kan brukes for å indikere hvor brukeren er i en prosess. Den kan brukes som en visuell guide eller for å vise fremdrift og navigere. Selve komponenten bør derimot ikke være hovednavigasjonsmåten for brukeren.
Husk å teste stepperen med tastatur og skjermleser
Dersom brukeren har mulighet til å bruke stepperen til å navigere, sørg for at det er mulig ved hjelp av tastatur og skjermleser.
Anatomi
| Element | Beskrivelse |
|---|---|
| Tittel | Kort og tydelig overskrift for steget |
| Ikon for steg | Viser status: fullført, aktivt eller ufullstendig |
| Hjelpetekst (valgfritt) | Innholdet som hører til steget |
| Aktiv linje | Kobler sammen fullførte steg |
| Ikke aktiv linje | Viser fremtidige steg |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import { PktStepper } from '@oslokommune/punkt-react';Props og tokens
Stepper
| Prop | Type | Beskrivelse |
|---|---|---|
activeStep | number | Indeks for det aktive trinnet i stepperen |
hideNonActiveStepsContent | boolean | Skal innholdet for inaktive trinn skjules? |
orientation | horizontalvertical | Orienteringen av stepperen, enten 'horizontal' eller 'vertical' |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i stepperen, en liste med step items |
Step Item
| Prop | Type | Beskrivelse |
|---|---|---|
status | completedcurrentincomplete | Status |
title | string | Tittel |
| Slot (children) | Beskrivelse |
|---|---|
default | Innholdet i step item |
Farger
| Element | CSS variabel |
|---|---|
| Text | |
| Active border | |
| Inactive border | |