Gå til hovedinnhold
KOMPONENTER

Stepper

npmv3.6.0

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

Komponenter

Stepper

NavnTypePåkrevd?Default-verdiBeskrivelse
activeIndexnumber

Det nåværende steget.

onStepClick(index: number) => void

Oppdater state ved klikk.

stepsstring[]

Liste av steg.

classNamestring

Ekstra klassenavn.

interactiveboolean true

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

showStepperIndexboolean true

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

as"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 158 more ...

<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