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.
Test komponenten
- Steg 1Dette er innholdet for steg 1
- Steg 2Dette er innholdet for steg 2
- Steg 3Dette er innholdet for steg 3
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';Egenskaper
Stepper
Props
- Prop:
activeStep- Type:
number- Beskrivelse:
- Indeks for det aktive trinnet i stepperen
- Prop:
hideNonActiveStepsContent?- Type:
boolean- Standardverdi:
true- Beskrivelse:
- Skal innholdet for inaktive trinn skjules?
- Prop:
orientation?- Type:
"horizontal" | "vertical"- Standardverdi:
"horizontal"- Beskrivelse:
- Orienteringen av stepperen, enten 'horizontal' eller 'vertical'
Slots
- Slot:
default- Beskrivelse:
- Innholdet i stepperen, en liste med step items
Step Item
Props
- Prop:
status?- Type:
"completed" | "current" | "incomplete"- Beskrivelse:
- Status
- Prop:
title- Type:
string- Beskrivelse:
- Tittel
Slots
- Slot:
default- Beskrivelse:
- Innholdet i step item