step

5min

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﻿
﻿
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 's state, making it available for use anywhere inside the .
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 Jigx icons﻿ 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 (ctrl+space) to see the list of available actions. 
Consideration
The step component can only be used inside the stepper component.
﻿Examples and code snippets ﻿
Step inside a stepper component
﻿
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)
step (dynamic)
datasources (static)
datasources (dynamic)
children:
  - type: component.stepper
    options:
      data: [email protected]-dynamic
      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
children:
  - type: component.stepper
    options:
      data: =@ctx.datasources.steps-dynamic
      isExpandable: true
      title: Shipment in transit
      item:
        type: component.step
        options:
          title: =@ctx.current.item.title
          description: =@ctx.current.item.description
          value: =@ctx.current.item.value 
          leftElement:
            element: icon
            icon: =@ctx.current.item.icon
          style:
            isPositive: =@ctx.current.item.iscompleted
            isActive: =@ctx.current.item.isactive
            isStrikeThrough: =@ctx.current.item.iscompleted
            isDisabled: =@ctx.current.item.iswaiting
      completedPercentage: 0.5
﻿
﻿

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 's state, making it available for use anywhere inside the .

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 Jigx icons 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 (ctrl+space) to see the list of available actions.

Updated 24 Jul 2024

Did this page help you?

stepper

story-group

step

﻿Configuration options﻿

Core structure

Other options

Actions

Consideration

﻿Examples and code snippets ﻿

Step Example

Configuration options

Examples and code snippets