Steps

2021-07-06 11:36

Show the progress bar as per the steps.

Property	Description	Type	Default	Required
className	Outermost layer overlapping style.	String		No
activeIndex	Current active step.	Number	1	Yes
failIndex	Current failed step (effective only in vertical mode).	Number	0	No
direction	Displaying direction, options including `vertical` and `horizontal`.	String	horizontal	No
size	Uniform icon size, in px.	Number	0	No
items	Step details.	Array[{title, description, icon, activeIcon, size}]	[]	Yes

Items attribute detailed description

Property	Description	Type	Required
items.title	Title of step details.	String	Yes
items.description	Description of step details.	String	Yes
items.icon	Icon for unreached step (effective only in vertical mode).	String	Yes
items.activeIcon	Icon for reached step (effective only in vertical mode)	String	Yes
items.size	Size of icon for reached step, in px. (effective only in vertical mode)	Number	Yes

Example

copy

{
  "usingComponents": {
    "steps": "mini-antui/es/steps/index"
  }
}

copy

<steps 
  activeIndex="{{activeIndex}}"
  items="{{items}}"
</steps>

copy

Page({
  data: {
    activeIndex: 1,
    items: [{
      title: 'Step one',
      description: 'This is step one',
    }, {
      title: 'Step two',
      description: 'This is step two',
    }, {
      title: 'Step three',
      description: 'This is step three',
    }]
  }
});