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

Relaterte komponenter

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
Varianter av stepper: vertikal
Varianter av stepper: horisontal

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

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

Skriv korte og beskrivende titler

UnngÄ

UnngÄ lange overskrifter i horisontal stepper

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.

Stepper i ulike skjermstĂžrrelser

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
Anatomi for Stepper

Implementasjon i kode

Hvordan ta komponenten i bruk?

Egenskaper

Stepper

PktStepper

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

PktStep

Props

Prop:
status?
Type:
"completed" | "current" | "incomplete"
Beskrivelse:
Status
Prop:
title
Type:
string
Beskrivelse:
Tittel

Slots

Slot:
default
Beskrivelse:
Innholdet i step item