Steps 步骤条

步骤条组件，建议步骤在2～3之内

使用指南

Taro-UI 版本需要在 v1.4.0 以上，在 Taro 文件中引入组件

import { AtSteps } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import "~taro-ui/dist/style/components/steps.scss";
@import "~taro-ui/dist/style/components/icon.scss";

一般用法

说明:

• 该组件为受控组件，开发者需要通过 onChange 事件来更新 current 值变化，current 与 onChange 函数必填

import Taro from '@tarojs/taro'
import { AtSteps } from 'taro-ui'
export default class TimelinePage extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }
  onChange (current) {
    this.setState({
      current
    })
  }
  render () {
    const items = [
      { 'title': '步骤一', 'desc': '这里是额外的信息，最多两行' },
      { 'title': '步骤二', 'desc': '这里是额外的信息，最多两行' },
      { 'title': '步骤三', 'desc': '这里是额外的信息，最多两行' }
    ]
    return (
      <AtSteps
        items={items}
        current={this.state.current}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

自定义图标

import Taro from '@tarojs/taro'
import { AtSteps } from 'taro-ui'
export default class TimelinePage extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }
  onChange (current) {
    this.setState({
      current
    })
  }
  render () {
    const items = [
      {
        'title': '步骤一',
        'desc': '这里是额外的信息，最多两行',
        'icon': {
          value: 'sound',
          activeColor: '#fff',
          inactiveColor: '#78A4FA',
          size: '14',
        }
      },
      {
        'title': '步骤二',
        'desc': '这里是额外的信息，最多两行',
        'icon': {
          value: 'shopping-cart',
          activeColor: '#fff',
          inactiveColor: '#78A4FA',
          size: '14',
        }
      },
      {
        'title': '步骤三',
        'desc': '这里是额外的信息，最多两行',
        'icon': {
          value: 'camera',
          activeColor: '#fff',
          inactiveColor: '#78A4FA',
          size: '14',
        }
      }
    ]
    return (
      <AtSteps
        items={items}
        current={this.state.current}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

状态步骤条

import Taro from '@tarojs/taro'
import { AtSteps } from 'taro-ui'
export default class TimelinePage extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }
  onChange (current) {
    this.setState({
      current
    })
  }
  render () {
    const items = [
      {
        'title': '步骤一',
        'desc': '这里是额外的信息，最多两行',
        'success': true
      },
      {
        'title': '步骤二',
        'desc': '这里是额外的信息，最多两行'
      },
      {
        'title': '步骤三',
        'desc': '这里是额外的信息，最多两行',
        'error': true
      }
    ]
    return (
      <AtSteps
        items={items}
        current={this.state.current}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

AtSteps 参数

AtSteps 事件

items object 字段说明