Stepper
Steppers convey progress through numbered steps.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v0.12.7
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.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-stepper--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Pass as many zeta-stepper-items as needed. | text |
Attributes
| 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 |
CSS Properties
| 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. |
Demo
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > ZetaStatefulWidget
Constructors
Creates a stepper from a list of steps.
ZetaStepper.new({required List<ZetaStep> steps, required int currentStep, ZetaStepperType type = ZetaStepperType.horizontal, ValueChanged<int>? onStepTapped, bool? rounded, Key? key})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| currentStep | The index into steps of the current step whose content is displayed. | int | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| onStepTapped | The callback called when a step is tapped, with its index passed as | ValueChanged<int>? | final |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| steps | The steps of the stepper whose titles, subtitles, icons always get shown. | List<ZetaStep> | final |
| type | The type of stepper that determines the layout. In the case of | ZetaStepperType | final |