Zum Hauptinhalt springen

ProgressProps

ProgressProps = object

Properties​

getCssClassForStep()?​

optional getCssClassForStep: (step) => Record<string, boolean | undefined>

A function to define custom css classes for each step. If not defined the following classes will be used:

{
   "progress-step-completed": step.completed,
   "progress-step-active": step.isCurrentStep,
   "progress-step-success": step.success === true,
   "progress-step-failed": step.success === false,
   "progress-step-skipped": step.skipped,
}

Parameters​

step​

Step

Returns​

Record<string, boolean | undefined>

steps​

steps: Step[]

The steps to be displayed in the progress gadget.

gadgetPrimaryColor?​

optional gadgetPrimaryColor: string

The primary color of the gadget.

largeIcons?​

optional largeIcons: boolean

Whether to use large icons or not.

Default​

false

isError?​

optional isError: boolean

Whether the process the gadget represents is in an error state or not.

Default​

false

customStyles?​

optional customStyles: object

Some custom variables to alter the appearance of the gadget.

gadgetAnimationSpeed?​

optional gadgetAnimationSpeed: string

How fast the progress animation should be.

Default​
"400ms"

iconsSize?​

optional iconsSize: string

The size of the icons, if largeIcons is set to false.

Default​
"2rem"

iconsSizeXXL?​

optional iconsSizeXXL: string

The size of the icons, if largeIcons is set to true.

Default​
"3rem"

inactiveColor?​

optional inactiveColor: string

The color for all steps not yet completed.

Default​
"#e6e7e8"

iconColor?​

optional iconColor: string

The icon color for all steps not yet completed.

Default​
"#808080"

errorBackgroundColor?​

optional errorBackgroundColor: string

The background color on any non-successful step.

Default​
"#e53935"

errorBorderColor?​

optional errorBorderColor: string

The border color on any non-successful step.

Default​
"#b71c1c"

Default​

undefined