Aksel

Meny

Komponenter / Core

Stepper

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

Stepper brukes som en visuell guide på progresjon, eller som støtte til navigasjon mellom steg.

Egnet til:

  • Vise brukeren hvor langt de har kommet i en prosess.

Uegnet til:

  • Eneste måte å navigere på.
  • Søknadsdialog (bruk FormProgress).

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Retningslinjer

Som lenke eller knapp

Stepper.Step er default en a-tag og brukes som lenke. Basert på hvordan applikasjonen din er satt opp, kan en button funke bedre. Da kan man bruke as-proppen på steget for å overskrive taggen.

Props

Stepper

children

  • Type:
    ReactNode
  • Description:

orientation?

  • Type:
    "horizontal" | "vertical"
  • Default:
    "vertical"
  • Description:

activeStep

  • Type:
    number
  • Description:

onStepChange?

  • Type:
    ((step: number) => void)
  • Description:

interactive?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLOListElement>
  • Description:

Stepper.Step

children

  • Type:
    string
  • Description:

completed?

  • Type:
    boolean
  • Default:
    false
  • Description:

interactive?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

Tokens

TokenFallback
--ac-stepper-text--a-surface-action
--ac-stepper-line--a-border-default
--ac-stepper-line-completed--a-border-selected
--ac-stepper-non-interactive--a-text-subtle
--ac-stepper-active--a-text-action-selected
--ac-stepper-active-bg--a-surface-action-selected
--ac-stepper-active-border--a-border-action-selected
--ac-stepper-active-text--a-text-on-action
--ac-stepper-hover-active--a-text-action-hover
--ac-stepper-hover-bg--a-surface-action-subtle-hover
--ac-stepper-non-interactive-completed-bg--a-surface-subtle
--ac-stepper-non-interactive-line-completed--a-border-strong
--ac-stepper-non-interactive-active--a-text-default
--ac-stepper-non-interactive-active-bg--a-surface-inverted
--ac-stepper-non-interactive-active-border--a-surface-inverted
--ac-stepper-non-interactive-active-text--a-text-on-inverted
--ac-stepper-active-completed--a-text-action-selected
--ac-stepper-non-interactive-active-completed--a-text-default
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.