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
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 |