Stepper
Steppers convey progress through numbered steps.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v0.11.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.
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 |
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 |