Skip to content

SiWizardComponent documentation

selector
si-wizard

Input Properties

NameTypeDefaultDescription
backText
TranslatableString$localize`:@@SI_WIZARD.BACK:Back`Description of back button.
cancelText
TranslatableString$localize`:@@SI_WIZARD.CANCEL:Cancel`Description of cancel button.
completionPageVisibleTime
number3000Define how many milliseconds the completion page is visible.
completionText
TranslatableString$localize`:@@SI_WIZARD.COMPLETED:Wizard completed!`Text shown if you complete the wizard.
enableCompletionPage
booleanfalseDisplay a predefined page by the end of the wizard.
hasCancel
booleanfalseShow the cancel button
hideNavigation
booleanfalseHide the navigation buttons previous/next.
hideSave
booleanfalseHide the save button.
inlineNavigation
booleantrueSet false to show navigation buttons in footer instead of inline.
nextText
TranslatableString$localize`:@@SI_WIZARD.NEXT:Next`Description of next button.
saveText
TranslatableString$localize`:@@SI_WIZARD.SAVE:Save`Description of save button.
showStepNumbers
booleanfalseUse number representation for steps.
showVerticalDivider
booleanfalseSet to true to display a divider between the steps and the content in the vertical
stepActiveIcon
string'elementRadioChecked'Class name of icon shown for the active step.
stepCompletedIcon
string'elementCheckedFilled'Class name of icon shown when a step was completed.
stepFailedIcon
string'elementWarningFilled'Class name of icon shown when a step had an error.
stepIcon
string'elementNotChecked'Class name of icon shown for current and upcoming steps.
verticalLayout
booleanfalseSet the orientation of the wizard to vertical.
verticalMaxSize
stringSet the wizard step container max size in vertical layout.
verticalMinSize
stringSet the wizard step container min size in vertical layout.
hasNavigation
Deprecated
booleantrueDeprecated: Use hideNavigation instead.

Output Properties

NameTypeDescription
completionAction
voidCallback function triggered after the wizard has been completed.
wizardCancel
voidCallback function triggered if the wizard has been canceled.

Attributes and Methods

NameTypeDefaultDescription
back(...)
(delta: number = 1) => voidGo to the previous wizard step.

Parameters
  • delta: number = 1  optional number of steps to move backwards.
(readonly) currentStep
(undefined | SiWizardStepComponent)Get current visible wizard step.
(readonly) index
numberGet the current step wizard step index.
next(...)
(delta: number = 1) => voidGo to the next wizard step.

Parameters
  • delta: number = 1  optional number of steps to move forward.
save()
() => voidTriggers the save action to complete the wizard.
(readonly) stepCount
numberGet number of wizard steps.
(readonly) cancel
Deprecated
OutputEmitterRef<void>...Callback function triggered if the wizard has been canceled.
Deprecated: use wizardCancel instead

Types Documentation

Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
Translatable
import
Constructor
() => {}
Properties
back: OutputEmitterRef<void> = ...
failed: InputSignalWithTransform<boolean, unknown> = false
heading: InputSignal<string> = ''
Whether this step is currently active or not.
isActive: WritableSignal<boolean> = false
isNextNavigable: InputSignalWithTransform<boolean, unknown> = true
isValid: InputSignalWithTransform<boolean, unknown> = true
next: OutputEmitterRef<void> = ...
save: OutputEmitterRef<void> = ...

Except where otherwise noted, content on this site is licensed under MIT License.