Stepper

Steppers convey progress through numbered steps.

zeta-web v1.4.0

Web Components

ZetaStepper is a container component for displaying a sequence of steps in a process.

To define individual steps, pass zeta-stepper-item elements as children of this component.

Name	Description	Type
default	Pass as many zeta-stepper-items as needed.	`text`

Name	Description	Type	Default
variant	Stepper direction. Defaults to horizontal.	`"vertical" \| "horizontal"`	`"horizontal"`
progress	The current progress of the stepper, represented as a floating point number (0.0-1.0).This number is used by the progress bar.	`number`	`0`
showOverflowButton	Set to true when not all stepper items can be displayed on screen at once.Displays a button that allows users to view additional stepper items.User can set their own functionality to the button.	`boolean`	`false`
progressBar	Set to true for the progress bar to be shown.	`boolean`	`false`

Name	Description
--stepper-container-height	Height of the overall container. Defaults to 92px.
--stepper-bar-width	Width of the bar between each step. Defaults to 200px.
--stepper-bar-height	Height of the bar between each step. Defaults to 3px.
--stepper-bar-vertical-width	Width of the bar between each step in vertical variant. Defaults to 3px.
--stepper-overflow-button-width	Width of the overflow button. Defaults to 50px.
--stepper-overflow-button-height	Height of the overflow button. Defaults to 60px.