All Products
Search
Document Center

Steps

Last Updated: Feb 04, 2021

This section describes steps, the progress bar displayed based on steps.

Property Description Type Default value Mandatory
className Style of the outermost cover. String - false
activeIndex Current active step Number 1 true
failIndex Current failed step, which is valid only in vertical mode. Number 0 false
direction Display direction, which can be vertical or horizontal. String horizontal false
size Unified size of icons, in px. Number 0 false
items Task details. Array[{title, description, icon, activeIcon, size}] [] true

Detailed description of items properties:

Property Description Type Default value Mandatory
items.title Title of step details. String - true
items.description Description of step details. String - true
items.icon Icon whose step has not been reached, which is valid only in vertical mode. String - true
items.activeIcon Icon whose step is reached, which is valid only in vertical mode. String - true
items.size Size of the icon whose step is reached, in px. This property is valid only in vertical mode. Number - true

Sample code

  1. {
  2. "usingComponents": {
  3. "steps": "mini-antui/es/steps/index"
  4. }
  5. }
  1. <steps
  2. activeIndex="{{activeIndex}}"
  3. items="{{items}}"
  4. ></steps>
  1. Page({
  2. data: {
  3. activeIndex: 1,
  4. items: [{
  5. title: 'Step 1',
  6. description: 'This is step 1',
  7. }, {
  8. title: 'Step 2',
  9. description: 'This is step 2',
  10. }, {
  11. title: 'Step 3',
  12. description: 'This is step 3',
  13. }]
  14. }
  15. });