Stepper
- Web Components
- Flutter
Demo
zeta-web v0.6.6
Web Components
Steppers convey progress through numbered steps.
For the steps, pass li elements with data-title and data-label attributes as children
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-stepper--docs
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| variant | Stepper direction. | "vertical" | "horizontal" | "horizontal" |
| activeStep | Current active step. | number | 0 |
| bar | Show bar separator. | boolean | true |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
Demo
Zeta stepper widget that displays progress through a sequence ofsteps. Steppers are particularly useful in the case of forms where one steprequires the completion of another one, or where multiple steps need to becompleted in order to submit the whole form.
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 |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| createElement() | Creates a StatefulElement to manage this widget's location in the tree. | StatefulElement | inherited |
| createState() | Creates the mutable state for this widget at a given location in the tree. | State<ZetaStepper> | override |
| debugDescribeChildren() | Returns a list of DiagnosticsNode objects describing this node's children. | List<DiagnosticsNode> | inherited |
| debugFillProperties(DiagnosticPropertiesBuilder properties) | Add additional properties associated with the node. | void | override |
| noSuchMethod(Invocation invocation) | Invoked when a nonexistent method or property is accessed. | dynamic | inherited |
| paddingAll(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingBottom(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingEnd(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingHorizontal(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingStart(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingTop(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingVertical(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) | Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. | DiagnosticsNode | inherited |
| toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) | A string representation of this object. | String | inherited |
| toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) | Returns a string representation of this node and its descendants. | String | inherited |
| toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) | Returns a one-line detailed description of the object. | String | inherited |
| toStringShort() | A short, textual description of this widget. | String | inherited |
Figma