Stepper

A dynamic, configurable step-by-step navigation component with customizable step progression and styling. Ideal for guiding users through multi-step processes in a structured and visually appealing way.


Extends: baseComponent


Fields

Name

Code

Data Type

Description

Resource ID

resourceId

text

Unique identifier for the stepper

Selected Step

selectedStep

text

Currently selected step

Style Classes

styleClasses

text

CSS classes applied to the stepper

Control Classes

controlClasses

text

Additional CSS classes for stepper controls

Navigate Button Color

navigateButtonColor

text

Color of navigation buttons

Done Icon

doneIcon

text

Icon for completed steps

Done Color

doneColor

text

Color for completed steps

Active Color

activeColor

text

Color for active step

Inactive Color

inactiveColor

text

Color for inactive steps

Next Button Label

nextButtonLabel

text

Custom label for next button

Back Button Label

backButtonLabel

text

Custom label for back button

Finish Button Label

finishButtonLabel

text

Custom label for finish button

Step Title

stepTitle

text

Title for individual steps

Step Icon

stepIcon

text

Icon for individual steps

Dark

dark

boolean

Enable dark mode

Contracted

contracted

boolean

Enable contracted view

Vertical

vertical

boolean

Enable vertical layout

Alternative Labels

alternativeLabels

boolean

Use alternative label style

Header Navigation

headerNav

boolean

Enable header navigation

Animated

animated

boolean

Enable animation

Hide Navigation

hideNavigation

boolean

Hide navigation buttons

Step Done

stepDone

boolean

Mark step as completed

Step Error

stepError

boolean

Mark step as having an error

Step Disabled

stepDisabled

boolean

Disable specific step


Methods

Name

Description

getCurrentStepIndex

Get the index of the current step

isStepDone

Check if a specific step is completed

goNext

Move to the next step

goPrevious

Move to the previous step

onFinish

Handle stepper completion

getStepTitle

Get the title of a specific step


Events

Name

Description

onStepChanged

Triggered when stepping between steps

onFinish

Triggered when stepper is completed