跳到主要内容

步骤条 Steps

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

API

安装使用​

import { TiSteps } from '@titian-design/mobile-vue';

用法示例​

基础用法​

<template>
  <TiSteps :options="options" :current="1" />
</template>

<script lang="ts" setup>  
import { TiSteps } from '@titian-design/mobile-vue';
const options = [
  {
    title: "标题文字",
    subtitle: "副标题",
    description: "详细内容文字，详细内容文字，详细内容文字",
    time: "2018.07.06 09:52:42",
  },
  {
    title: "标题文字",
    subtitle: "副标题",
    description: "详细内容文字，详细内容文字，详细内容文字",
    time: "2018.07.06 09:52:42",
  }
]
</script>

设置高亮项​

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

<template>
  <TiSteps :options="options" :current="0" />
</template>

<script lang="ts" setup>  
import { TiSteps } from '@titian-design/mobile-vue';
const options = [
  {
    title: "标题文字",
    subtitle: "副标题",
    description: "详细内容文字，详细内容文字，详细内容文字",
    time: "2018.07.06 09:52:42",
  },
  {
    title: "标题文字",
    subtitle: "副标题",
    description: "详细内容文字，详细内容文字，详细内容文字",
    time: "2018.07.06 09:52:42",
    checked: true
  }
]
</script>

设置副标题右对齐​

<template>
  <TiSteps :options="options" subtitle-align="right" />
</template>

<script lang="ts" setup>  
import { TiSteps } from '@titian-design/mobile-vue';
const options = [
  {
    title: "标题文字",
    subtitle: "副标题",
    description: "详细内容文字，详细内容文字，详细内容文字",
    time: "2018.07.06 09:52:42",
  },
  {
    title: "标题文字",
    subtitle: "副标题",
    description: "详细内容文字，详细内容文字，详细内容文字",
    time: "2018.07.06 09:52:42",
    checked: true
  }
]
</script>

自定义样式​

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

<template>
  <TiSteps :options="options" />
</template>

<script lang="ts" setup>  
import { TiSteps } from '@titian-design/mobile-vue';
const options = [
  {
    title: "标题文字",
    subtitle: "副标题",
    description: "详细内容文字，详细内容文字，详细内容文字",
    time: "2018.07.06 09:52:42",
    style: {
      '--steps-title-font-size': '12px',
      '--steps-desc-color': 'red',
    }
  }
]
</script>

TiSteps API​

属性 Properties​

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

Option​

API 属性中的 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步骤条最下方内容高亮颜色-