Stegindikator

Stegindikatoren skal vise stegvis progresjon gjennom en prosess.

Normal

<Stegindikator
  steg={[
    { label: "Dette steget først" },
    { label: "Og så dette steget", aktiv: true },
    { label: "Deretter må du gjøre dette" },
    { label: "Konklusjonen", disabled: true },
  ]}
  onChange={() => {}}
/>
 Kopiert!

Med label

2
Og så dette steget
4
Konklusjonen

<Stegindikator
  steg={[
    { label: "Dette steget først" },
    { label: "Og så dette steget", aktiv: true },
    { label: "Deretter må du gjøre dette" },
    { label: "Konklusjonen", disabled: true },
  ]}
  onChange={() => {}}
  visLabel
/>
 Kopiert!

Kompakt

<Stegindikator
  steg={[
    { label: "Dette steget først" },
    { label: "Og så dette steget", aktiv: true },
    { label: "Deretter må du gjøre dette" },
    { label: "Konklusjonen", disabled: true },
  ]}
  onChange={() => {}}
  kompakt
/>
 Kopiert!

Kompakt med label

2
Og så dette steget
4
Konklusjonen

<Stegindikator
  steg={[
    { label: "Dette steget først" },
    { label: "Og så dette steget", aktiv: true },
    { label: "Deretter må du gjøre dette" },
    { label: "Konklusjonen", disabled: true },
  ]}
  onChange={() => {}}
  kompakt
  visLabel
/>
 Kopiert!

Autoresponsiv

Denne versjonen vil kontinuerlig overvåke tilgjenglig konteiner-plass og automatisk bytte visningsmodus for å tilpasse seg bredden.

2
Og så dette steget

<Stegindikator
  steg={[
    { label: "Dette steget først" },
    { label: "Og så dette steget", aktiv: true },
    { label: "Deretter må du gjøre dette" },
  ]}
  onChange={() => {}}
  visLabel
  autoResponsiv
/>
 Kopiert!

Rediger siden på Github