Status |
|
---|---|
Figma | ✅Publisert |
CSS | ✅Publisert |
Vue | ✅Publisert |
React | ✅Publisert |
Dokumentasjon | ✅Publisert |
Om komponenten
Stepper brukes til å vise hvor man er i en stegvis prosess og hva som gjenstår av den. Den gir en visuell representasjon av prosessens fremgang ved å dele den opp i flere logiske trinn. Den brukes ofte i skjemaer, spørreundersøkelser eller flersiders navigasjon.
Varianter
Det finnes to varianter av stepper: vertikale stepper og horisontale stepper. Vertikale stepper passer best til smale skjermstørrelser og er å bruke når siden er bygd opp slik. Horisontale stepper er ideelle å bruke når innholdet i ett trinn avhenger av et tidligere trinn.
Farger
Stepper bruker alltid fargen brand-blue (#2A2859). Horizontal stepper bruker surface-subtle-pale-blue (#F1FDFF) på bakgrunn av et aktivt steg.
Alle bruker dark-blue-1000 (#2A2859), text-body-default som tekstfarge.
Slik bruker du komponenten
Stepper kan brukes til navigasjon, men skal ikke være eneste måte å navigere på. Trinnene vises fra venstre mot høyre, og kan trykkes på for å navigere frem og tilbake (kan velges?). Det skal være minimum 3 steps og maksimum 8 steps. Alle steps skal vises, men de man ikke har gjennomført skal ikke vises som aktive (disabled).
Gjør slik/ikke gjør slik
Unngå lange overskrifter i horisontale stepper
Anatomi
- Tittel
- Ikon for steg
- Tekstfelt
- Aktiv linje
- Ikke aktiv linje