Steps

2022-07-29 06:32

Show the progress bar as per the steps.

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

Items attribute detailed description

Attribute name	Description	Type	Default	Mandatory
items.title	Title of step details	String		true
items.description	Description of step details	String		true
items.icon	Icon for unreached step (effective only in vertical mode)	String		true
items.activeIcon	Icon for reached step (effective only in vertical mode)	String		true
items.size	Size of icon for reached step, in px (effective only in vertical mode)	Number		true

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',
    }]
  }
});