Gå til hovedinnhold
Entur logo – designsystemets starside
KOMPONENTER

Stepper

npmv5.0.6

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

npm install @entur/menu
@import '@entur/menu/dist/styles.css';

Retningslinjer for bruk

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

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.

Komponenter

<Stepper />

import { Stepper } from '@entur/menu';
NavnTypeDefault-verdiBeskrivelse
stepsstring[]

Liste med steg-navn i rekkefølge.

activeIndexnumber

Det nåværende steget. 0-indeksert

interactive?boolean false

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

onStepClick?((index: number) => void)

Kalles med indeksen til det klikkede steget. Fungerer kun hvis Stepper-en er interaktiv

showStepperIndex?boolean true

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

className?string

Ekstra klassenavn.

ariaLabelStep?string 'Steg'

Skjermlesertekst for ordet ‘steg’ som i ‘steg 1 av 3’

ariaLabelOf?string

Skjermlesertekst for ordet ‘av’ som i ‘steg 1 _av_ 3’ @defaul ‘av’

ariaLabelCompleted?string 'fullført'

Skjermlesertekst for ordet fullført

ariaLabelSummary?string `Stegindikator med ${steps.length} steg, du er på steg ${activeIndex + 1} ${steps[activeIndex]},`

Skjermlesertekst for oppsummering av hele stepper-en

Rediger denne siden på GitHub