Gå til hovedinnhold
KOMPONENTER

Stepper

npmv4.1.42

En stepper tar deg stegvis gjennom et visst løp.

Kontrast

Komponenter

Stepper

NavnTypeDefault-verdiBeskrivelse
activeIndexnumber

Det nåværende steget.

onStepClick(index: number) => void

Oppdater state ved klikk.

stepsstring[]

Liste av steg.

className?string

Ekstra klassenavn.

interactive?boolean false

Om stepperen skal være et interaktivt-navigasjonselement eller ikke

showStepperIndex?boolean true

Om stepper skal vise indeksering av hvilket trinn man er på

as?string | React.ElementType

<Stepper />-komponenten skal brukes til skjemaer som krever trinnvis utfylling. Det skal i utgangspunktet ikke være mulig å hoppe framover i skjemaet uten å ha fylt inn de foregående stegene først.

Retningslinjer for bruk

Stepper er en visuell fremstilling av brukerens fremgang gjennom et sett med trinn. En trinnliste som fungerer som en veiviser for å hjelpe brukerne med å fullføre en spesifikk oppgave i en arbeidsflyt bestående av et antall trinn. Den gir brukeren en raskt måte å se hvor de er i løpet og hva de skal jobbe med videre. Vis trinnene i rekkefølge fra venstre mot høyre. Brukeren kan navigere seg bakover ved å klikke på overskriften på et fullført trinn.

Trinnstatus

  • Fullført: Vises når trinnet er utført og brukeren oppnår det som kreves for å fortsette til neste trinn.
  • Aktiv: Viser det nåværende trinnet, men ikke fullført enda.
  • Inaktiv: Viser trinnene som ikke er nådd enda.
Rediger denne siden på Bitbucket