步骤条StepBar

一、效果总览

二、描述

横向步骤条一种常见的导航形式

垂直步骤条常用于时间线的描述

三、构造函数及参数说明

OmniSteps({
  config: OmniStepsConfig,
  horizontalStepsStyle: OmniHorizontalStepsStyle,
  verticalStepsStyle: OmniVerticalStepsStyle
})

参数名	参数类型	描述	是否必填	默认值
config	OmniStepsConfig	步骤条数据配置	是	无
horizontalStepsStyle	OmniHorizontalStepsStyle	横向步骤条样式配置	否	有
verticalStepsStyle	OmniVerticalStepsStyle	纵向步骤条样式配置	否	有

OmniStepsConfig

参数名	参数类型	描述	是否必填	默认值
stepsType	OmniStepsType	横or竖	是
stepsCount	number	步骤数量	是	无
steps	OmniStepItemConfig[]	步骤item配置	是	无
currentIndex	number	当前步骤下标	是	无

OmniStepItemConfig

参数名	参数类型	描述	是否必填	默认值
state	OmniStepState	步骤状态	是
title	string	步骤标题	是
desc	string	步骤描述	否
doingIcon	ResourceStr	进行中icon	否
completedIcon	ResourceStr	已完成icon	否

四、代码演示

默认效果(横向)

//步骤条数据
@State private steps: OmniStepItemConfig[] = [
  {
    state: OmniStepState.Indexed,
    title: '第一步',
    desc: '辅助信息1'
  },
  {
    state: OmniStepState.Indexed,
    title: '第二步',
    desc: '辅助信息2'
  },
  {
    state: OmniStepState.Indexed,
    title: '第三步',
    desc: '辅助信息3'
  },
  {
    state: OmniStepState.Indexed,
    title: '第四步',
    desc: '辅助信息4'
  },
  {
    state: OmniStepState.Indexed,
    title: '第五步',
    desc: '辅助信息5'
  }
]


OmniSteps({
  config: {
    stepsType: OmniStepsType.Horizontal,
    stepsCount: this.steps.length,
    steps: this.steps,
    currentIndex: 0
  }
})

纵向步骤条

OmniSteps({
  config: {
    stepsType: OmniStepsType.Vertical,
    stepsCount: this.steps.length,
    steps: this.steps,
    currentIndex: 2
  }
})