step

5min

This component is used to display consecutive steps in a stepper component. You can divide the task into steps and then mark them as completed and gradually get closer to completing the entire task.
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes: title and value
Other options:
description - The description of the step
style - There are styling sets:
isActive
isDisabled
isNegative
isPositive
isStrikeThrough
isWarning
leftElement - The only available element for the step is an icon. There is a list of icons available, but you can customize the design with your own icon
Actions: 
onPress  - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event
The step can't be used as a separate component, it can only be used inside the stepper component.
﻿Examples and code snippets ﻿
Step Example
﻿
In this example, we see the steps of delivering a shipment. In this case, the goods have already been ordered and shipped 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: =@ctx.datasources.steps
      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
      style:  
        isPositive: false
        isWarning: false
        isNegative: false
children:
  - type: component.stepper
    options:
      data: =@ctx.datasources.steps
      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
      style:  
        isPositive: false
        isWarning: false
        isNegative: false
﻿
See also
﻿Developer reference  
﻿Related examples (Github)﻿
﻿