step

This component displays consecutive steps in a stepper component. You can divide the task into steps, mark them as completed, and gradually get closer to completing the entire task.

Step component

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
title	Provide a title for the step item. You can use an expression to set the title.
value	The value of the step item. The value is exposed in the jig's state, making it available for use anywhere inside the jig.

Other options
description	Describe the step item that is displayed as the subtitle.
leftElement	The only available element for the step is an icon displayed on the left of the value. A list of icons is available. See for more information. If no icon is specified a checkbox is used on the left.
style	The following styling options are available: isActive - Shows the step as active. isDisabled - Shows the step value, description, and icon as disabled (greyed out). isNegative - The step description and icon are shown in red. isPositive - The description and icon are shown in green. isStrikeThrough - The step's value and description are shown with a line through it. isWarning - The description and icon are shown in orange.

Actions
onPress	The action is triggered when pressing on the step item. Use IntelliSense to see the list of available actions.

Consideration

• The step component can only be used inside the stepper component.

Examples and code snippets

Step Example

Step in Stepper

This example shows the steps of delivering a shipment. In this case, the goods have already been ordered, and the shipment is in transit.

Examples: See the full example using static data on GitHub. See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data on GitHub. See the full datasource for dynamic data in GitHub.

step (static)

children:
  - type: component.stepper
    options:
      data: [email protected]
      isExpandable: true
      title: Shipment in transit
      item:
        type: component.step
        options:
          title: [email protected]
          description: [email protected]
          value: [email protected] 
          leftElement:
            element: icon
            icon: [email protected]
          style:
            isPositive: [email protected]
            isActive: [email protected]
            isStrikeThrough: [email protected]
            isDisabled: [email protected]
      completedPercentage: 0.5

step (dynamic)

datasources (static)

datasources (dynamic)