跳到主要内容

步骤条 Steps

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

API

用法示例​

基础用法​

<ti-steps id="ti-steps"></ti-steps>

设置高亮项​

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

<ti-steps id="ti-steps"></ti-steps>

设置副标题右对齐​

<ti-steps id="ti-steps" subtitle-align="right"></ti-steps>

自定义样式​

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

window.onload = function(){
  var tiSteps = document.getElementById("ti-steps");
  tiSteps.options = [
    {
      title: "标题文字",
      subtitle: "副标题",
      description: "详细内容文字，详细内容文字，详细内容文字",
      time: "2018.07.06 09:52:42",
      style: {
        '--steps-title-font-size': '12px',
        '--steps-desc-color': 'red',
      }
    }
  ]
};

配合ti-step-item使用​

对于需要自定义title、subtitle、description、time区域内容的场景，推荐配合使用ti-step-item

<ti-steps>
  <ti-step-item
    title="标题文字"
    subtitle="副标题"
    use-description-slot
  >
    <view slot="description">详细内容文字</view>  
  </ti-step-item>
  <ti-step-item
    use-title-slot
    use-subtitle-slot
    use-description-slot
    use-time-slot
  >
    <view slot="title">标题文字</view>  
    <view slot="subtitle">副标题文字</view>  
    <view slot="description">详细内容文字</view>  
    <view slot="time">时间</view>  
  </ti-step-item>
</ti-steps>

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否-图标名称-
hasLineboolean否-是否显示左侧边线-
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步骤条最下方内容高亮颜色-

ti-step-item API​

属性 Properties​

名称类型必填默认值说明备注
titlestring否-标题文字-
subtitlestring否-标题右侧区域，副标题文字-
descriptionstring否-主体，描述文字-
timestring否-最下方区域，如时间-
iconstring否-图标名称-
checkedboolean否-是否高亮，权重比current高-
subtitle-alignleft | right否-副标题的对齐方式-
use-title-lotboolean否false是否使用标题区域插槽-
use-subtitle-slotboolean否false是否使用副标题区域插槽-
use-description-slotboolean否false是否使用描述文字区域插槽-
use-time-slotboolean否false是否使用最下方区域插槽-
has-lineboolean否-是否显示左侧边线-
ext-stylestring | Record<string, string> 否-根节点样式-

插槽 Slots​

名称说明备注
title标题区域插槽-
subtitle副标题区域插槽-
description描述文字区域插槽-
time最下方区域插槽-