Komponenter
FormProgress
FormProgress viser hvilket steg brukeren er på i en søknadsdialog.
Egnet til:
- Søknadsdialoger
Eksempler
FormProgress.Step
<FormProgress.Step> har samme API som <Stepper.Step>. Se dokumentasjonen for Stepper for mer informasjon.
Retningslinjer
Denne komponenten er laget spesifikt for bruk i søknadsdialoger. Bruk ProgressBar hvis du har behov for å lage en mer skreddersydd framdriftsindikator.
Hvilke steg skal være med?
Introside og kvitteringsside skal ikke være med som egne steg i denne komponenten. Siste steg skal som regel være en oppsummeringsside.
Props
FormProgress
totalSteps
- Type:
number - Description:
Total number of steps.
activeStep
- Type:
number - Description:
Current active step.
Index starts at 1, not 0.
open?
- Type:
boolean - Description:
Shows Stepper if
true, hides iffalse. Using this prop removes automatic control of open-state.
onOpenChange?
- Type:
((open: boolean) => void) - Description:
Callback for current open-state
children
- Type:
ReactNode - Description:
Should contain <FormProgress.Step> elements.
onStepChange?
- Type:
((step: number) => void) - Description:
Callback for next
activeStep.Index starts at 1, not 0.
interactiveSteps?
- Type:
boolean - Default:
true - Description:
Makes Stepper non-interactive if false.
translations?
- Type:
RecursivePartial<{ step: string; showAllSteps: string; hideAllSteps: string; }> - Description:
i18n API for customizing texts and labels.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
FormProgress.Step
children
- Type:
string - Description:
Text content by indicator.
completed?
- Type:
boolean - Default:
false - Description:
Makes step-indicator a checkmark.
interactive?
- Type:
boolean - Default:
true - Description:
Makes step non-interactive if false. Step will be set to a
<div>, overridingas-prop.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLAnchorElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs