跳到主要内容

步骤条 Steps

步骤条组件引导用户按照流程完成任务，让用户了解当前出于整个流程中的位置

API

安装使用​

{
  // 原生小程序
  "usingComponents": {
    "ti-steps": "@titian-design/weapp/steps/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-steps": "platform://titian-mp/ti-steps"
  }
}

用法示例​

基础用法​

<ti-steps options="{{ options }}" current="{{ 0 }}" />

设置高亮项​

可以设置 current 属性，也可设置每项 option 里面的 checked 字段

<ti-steps options="{{ options }}" current="{{ 1 }}" />

设置副标题右对齐​

<ti-steps options="{{ options }}" subtitle-align="right" />

自定义样式​

自定义每一项的样式，可以设置每项option里面的style字段，查看可用css变量

Page({
  data: {
    options: [
      {
        title: "标题文字",
        subtitle: "副标题",
        description: "详细内容文字，详细内容文字，详细内容文字",
        time: "2018.07.06 09:52:42",
        style: {
          '--steps-title-font-size': '12px',
          '--steps-desc-color': 'red',
        }
      }
    ]
  }
})

ti-steps API​

属性 Properties​

名称类型必填默认值说明备注
optionsArray<Option>是-数据项，Option类型-
currentnumber | Array<number>否0高亮项索引-
active-colorstring否-高亮项颜色-
iconstring否-每项图标名-
subtitle-alignleft | right否left副标题的对齐方式-
ext-stylestring | Record<string, string> 否-根节点样式-

Option​

属性options为一个对象数组，数组中的每一个对象配置每一条，每一条有以下 key

名称类型必填默认值说明备注
titlestring否-标题文字-
subtitlestring否-标题右侧区域，副标题文字-
descriptionstring否-主体，描述文字-
timestring否-最下方区域，如时间-
iconstring否-图标名称-
stylestring | Record<string, string> 否-每项自定义样式，查看可用css变量-

外部样式类 External Classes​

名称说明备注
ext-class根节点样式类名-

CSS 变量 CSS Variable​

变量默认值说明备注
--steps-padding-h28rpx步骤条整体水平方向，左右内边距-
--steps-padding-bottom40rpx步骤条整体下方内边距-
--steps-text-vertical-gap8rpx步骤条右侧内容部分，文字竖项的间距-
--steps-line-width2rpx步骤条左侧图标下方的竖线的宽度，默认横向缩放50%-
--steps-line-color2rpx步骤条左侧图标下方的竖线的颜色-
--steps-icon-margin-right36rpx步骤条左侧图标和右侧内容之间的间距-
--steps-icon-size40rpx步骤条左侧自定义的图标尺寸-
--steps-dot-size40rpx步骤条左侧圆点的尺寸-
--steps-dot-color40rpx步骤条左侧圆点的颜色-
--steps-title-color#9e9e9e步骤条标题颜色-
--steps-title-font-size30rpx步骤条标题字号-
--steps-title-font-weight600步骤条标题字重-
--steps-title-line-height36rpx步骤条标题行高-
--steps-subtitle-color#9e9e9e步骤条副标题颜色-
--steps-subtitle-font-size24rpx步骤条副标题字号-
--steps-subtitle-font-weight400步骤条副标题字重-
--steps-subtitle-line-height28rpx步骤条副标题行高-
--steps-subtitle-margin-left8rpx步骤条副标题左侧间距-
--steps-subtitle-text-alignleft步骤条副标题对齐方式-
--steps-desc-color#9e9e9e步骤条描述内容颜色-
--steps-desc-font-size26rpx步骤条描述内容字号-
--steps-desc-font-weight400步骤条描述内容字重-
--steps-desc-line-height40rpx步骤条描述内容行高-
--steps-desc-text-alignjustify步骤条描述内容文字对齐方式-
--steps-time-color#9e9e9e步骤条最下方内容颜色-
--steps-time-font-size24rpx步骤条最下方内容字号-
--steps-time-font-weight400步骤条最下方内容字重-
--steps-time-line-height28rpx步骤条最下方内容行高-
--steps-time-text-alignleft步骤条最下方内容文字对齐方式-
--steps-active-color-步骤条高亮项颜色，此变量整体设置，不同内容部分高亮项不一样，可以用其他变量分开设置-
--steps-line-active-color#e0e0e0步骤条竖线高亮项颜色，默认和不高亮颜色一致-
--steps-icon-active-color#fa2c19步骤条图标高亮颜色，默认跟随主题色-
--steps-dot-active-color#fa2c19步骤条圆点图标高亮颜色，默认跟随主题色-
--steps-title-active-color#fa2c19步骤条标题高亮颜色，默认跟随主题色-
--steps-subtitle-active-color#fa2c19步骤条副标题高亮颜色，默认跟随主题色-
--steps-desc-active-color#212121步骤条描述内容高亮颜色-
--steps-time-active-color#212121步骤条最下方内容高亮颜色-