Stepper

shadow

Komponent Stepper zobrazuje pokrok prostredníctvom očíslovaných krokov. Poskytuje workflow podobný sprievodcovi. Steppery zobrazujú pokrok prostredníctvom sekvencie očíslovaných krokov.

Základné použitie

Disabled (Deaktivované) kroky

Vlastné tlačidlá

Atribúty a Vlastnosti

active

Description	The step color you want to use from your application's color palette. The default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". See theming for more information on colors.
Attribute	active
Type	"danger." ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	primary

done

Description	The color of the step after finishing that you want to use from the color palette of your application. The default options are "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". See theming for more information on colors.
Attribute	done
Type	"danger." ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	success

Eventy

Name	Description
stepper:next	It is transmitted when moving to the next step.
stepper:prev	It is transmitted when returning to the previous step.
stepper:finish	It is transmitted after the last step is completed.

Metódy

navigate

Description	Navigates to a different step in the process according to the specified direction.
Signature	navigate(direction: number): void

goToStep

Description	Goes to a specific step and updates the stepper UI.
Signature	goToStep(stepIndex: number): void

setStepDefault

Description	Resets the step to the default state, removing active and completed attributes.
Signature	setStepDefault(nav: HTMLElement, badge?: HTMLElement ｜ null, stepIndex?: number): void

setStepActive

Description	Sets the step as active and updates the badge.
Signature	setStepActive(nav: HTMLElement, badge?: HTMLElement ｜ null, stepIndex?: number ｜ null): void

setContentActive

Description	Displays the contents of the selected step and hides the others.
Signature	setContentActive(stepIndex: number): void

setStepDone

Description	Marks the step as complete and updates the badge with the icon.
Signature	setStepDone(nav: HTMLElement, badge?: HTMLElement ｜ null): void

setStepLocked

Description	Marks the step as locked and updates the badge with the lock icon.
Signature	setStepLocked(nav: HTMLElement, badge?: HTMLElement ｜ null): void

CSS Shadow Parts

Name	Description
native	Natívna časť steppera.
header	Hlavička steppera.
content	Obsah steppera.

CSS Custom Vlastnosti

Name	Description
--wje-stepper-justify	Alignment of the step header.
--wje-stepper-grow	Flex-grow for each step in the header.
--wje-stepper-margin	Indentation for the arrow icon between steps.

Sloty

Name	Description
``	Default slot for stepper steps.
prev	Slot for the custom button of the previous step.
next	Slot pre vlastné tlačidlo ďalšieho kroku.
finish	Slot pre vlastné tlačidlo dokončenia.