Step Display

<sw-step-display>

ready
This step display component need flow-items inside it's slot to work. To control the current position use the `itemIndex` property (zero-based index). To change the variant of the current position you can use the `itemVariant` property. To load specific variants for multiple items you can use the `initialItemVariants` property with an array of variants. Possible variants are 'disabled', 'info', 'error' and 'success'.

Usage

Loading...
<sw-step-display :itemIndex="flowChartItemIndex"
                           :itemVariant="flowChartItemVariant"
                           :initialItemVariants="flowChartInitialItemVariants">
  <sw-step-item>
     Check
  </sw-step-item>
  <sw-step-item>
     Read
  </sw-step-item>
  <sw-step-item disabledIcon="small-default-checkmark-line-medium">
     Finish
  </sw-step-item>
</sw-step-display>

Component properties

Property name Type Default
itemIndex Number
itemVariant String
initialItemVariants Array

Methods

Method name Parameters
setItemVariants itemVariants
setVariantForCurrentItem variant
setItemActive index active

Imports

  • ./sw-step-display.html.twig

Watcher

  • itemIndex
  • itemVariant
  • initialItemVariants

Twig blocks

  • sw_step_display_slot
  • sw_step_display

Slots

  • default