Stepper

Om komponenten

Stepper-komponenten er designet for å veilede brukere gjennom en sekvens av trinn eller oppgaver, og tilbyr en visuell fremstilling av progresjonen gjennom disse trinnene. Den støtter både vertikal og horisontal orientering, noe som gir fleksibilitet i ulike bruksscenarioer.

Stepper-komponenten består av to hovedelementer: <Stepper> og <Step>. Stepper-elementet er kontaineren for alle Step-elementene, og Step-elementene representerer de ulike trinnene i sekvensen.

Stepper-elementet har en prop hideNonActiveStepsContent som skjuler beskrivelsene til trinn som ikke er aktive. I React, har <Stepper> også en prop activeStep som bistår med å gjemme disse beskrivelsene. Hvert Step-element har en tittel og en status som indikerer om trinnet er fullført, aktivt eller ikke fullført.

// React
<PktStepper activeStep={0}>
  <PktStep title="Title" status="completed">
    Content
  </PktStep>
  <PktStep title="Title" status="current">
    Content
  </PktStep>
  <PktStep title="Title" status="incomplete">
    Content
  </PktStep>
</PktStepper>

Varianter

Komponenten finnes i to ulike varianter: vertikal stepper og horisontal stepper. Som standard, vil komponenten vises som en vertikal stepper. For å bruke horisontal stepper i React eller Vue, sett prop-en orientation til horizontal. Komponenten kan brukes i ren html ved å legge til klassen pkt-stepper--horizontal på pkt-stepper-elementet.

CSS oversikt

I Punkt brukes BEM-styling. Under er Stepper sin CSS-struktur.

Props, slots og events

I React, brukes activeStep i kombinasjon med hideNonActiveStepContent i <Stepper> til å gjemme stegbeskrivelser som ikke er aktive. I Vue, bruker man hideNonActiveStepsContent fra <Stepper> og status inni <Step> til å gjøre det samme. Dette har noe med hvordan props, datadeling og slots fungerer i de to rammeverkene og er et bevisst valg vi har tatt slik at måten komponentene brukes på er like på tvers av rammeverkene til tross for at Vue versjonen da ikke vil ha prop-en activeStep.

Utenom activeStep-propen i React, er disse propsene ellers like på tvers av React og Vue komponentene.

<Stepper/>

<Step/>