步骤条 Steps

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

使用

API

安装使用

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

用法示例

基础用法

• App.wxml
• index.js

code

copy

code

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

copy

code

Page({
  data: {
    options: [
      {
        title: '标题文字',
        subtitle: '副标题',
        description: '详细内容文字，详细内容文字，详细内容文字',
        time: '2018.07.06 09:52:42',
      },
      {
        title: '标题文字',
        subtitle: '副标题',
        description: '详细内容文字，详细内容文字，详细内容文字',
        time: '2018.07.06 09:52:42',
      },
    ],
  },
});

设置副标题右对齐

• App.wxml
• index.js

code

copy

code

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

copy

code

Page({
  data: {
    options: [
      {
        title: '标题文字',
        subtitle: '副标题',
        description: '详细内容文字，详细内容文字，详细内容文字',
        time: '2018.07.06 09:52:42',
      },
    ],
  },
});

配合TiStepItem使用

详细内容文字

标题文字

副标题文字

详细内容文字

时间: 2024-04-18T06:23:01.776Z

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

copy

code

<ti-steps>
  <ti-step-item title="标题文字" subtitle="副标题" useDescriptionSlot>
    <view slot="description">详细内容文字</view>
  </ti-step-item>
  <ti-step-item useTitleSlot useSubtitleSlot useDescriptionSlot>
    <view slot="title">标题文字</view>
    <view slot="subtitle">副标题文字</view>
    <view slot="description">详细内容文字</view>
  </ti-step-item>
</ti-steps>

设置高亮项

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

• App.wxml
• index.js

code

copy

code

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

copy

code

Page({
  data: {
    options: [
      {
        title: '标题文字',
        subtitle: '副标题',
        description: '详细内容文字，详细内容文字，详细内容文字',
        time: '2018.07.06 09:52:42',
      },
      {
        title: '标题文字',
        subtitle: '副标题',
        description: '详细内容文字，详细内容文字，详细内容文字',
        time: '2018.07.06 09:52:42',
        checked: true,
      },
    ],
  },
});

自定义样式

自定义每一项的样式，可以设置每项option里面的style字段，

• App.wxml
• index.js

code

copy

code

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

copy

code

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

ti-steps API

属性 Properties

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

Option

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

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

变量	默认值	说明	备注
--steps-padding-h	theme.spacing.horizontal.h7	步骤条整体水平方向，左右内边距	-
--steps-padding-bottom	theme.spacing.vertical.v10	步骤条整体下方内边距	-
--steps-text-vertical-gap	theme.spacing.gap.g2	步骤条右侧内容部分，文字竖项的间距	-
--steps-line-width	2rpx	步骤条左侧图标下方的竖线的宽度，默认横向缩放50%	-
--steps-line-color	theme.color.gray.background.100	步骤条左侧图标下方的竖线的颜色	-
--steps-icon-margin-right	theme.spacing.horizontal.h9	步骤条左侧图标和右侧内容之间的间距	-
--steps-icon-size	theme.fontSize.t12	步骤条左侧自定义的图标尺寸	-
--steps-dot-size	theme.fontSize.t12	步骤条左侧圆点的尺寸	-
--steps-dot-color	theme.color.gray.background.100	步骤条左侧圆点的颜色	-
--steps-title-color	theme.color.gray.texticon.400	步骤条标题颜色	-
--steps-title-font-size	theme.fontSize.t7	步骤条标题字号	-
--steps-title-font-weight	theme.fontWeight.semibold	步骤条标题字重	-
--steps-title-line-height	theme.lineHeight.multiline.t3	步骤条标题行高	-
--steps-subtitle-color	theme.color.gray.texticon.400	步骤条副标题颜色	-
--steps-subtitle-font-size	theme.fontSize.t4	步骤条副标题字号	-
--steps-subtitle-font-weight	theme.fontWeight.regular	步骤条副标题字重	-
--steps-subtitle-line-height	theme.lineHeight.multiline.t1	步骤条副标题行高	-
--steps-subtitle-margin-left	theme.spacing.gap.g2	步骤条副标题左侧间距	-
--steps-subtitle-text-align	left	步骤条副标题对齐方式	-
--steps-desc-color	theme.color.gray.texticon.400	步骤条描述内容颜色	-
--steps-desc-font-size	theme.fontSize.t5	步骤条描述内容字号	-
--steps-desc-font-weight	theme.fontWeight.regular	步骤条描述内容字重	-
--steps-desc-line-height	theme.lineHeight.multiline.t4	步骤条描述内容行高	-
--steps-desc-text-align	justify	步骤条描述内容文字对齐方式	-
--steps-time-color	theme.color.gray.texticon.400	步骤条最下方内容颜色	-
--steps-time-font-size	theme.fontSize.t4	步骤条最下方内容字号	-
--steps-time-font-weight	theme.fontWeight.regular	步骤条最下方内容字重	-
--steps-time-line-height	theme.lineHeight.multiline.t1	步骤条最下方内容行高	-
--steps-time-text-align	left	步骤条最下方内容文字对齐方式	-
--steps-active-color	-	步骤条高亮项颜色，此变量整体设置，不同内容部分高亮项不一样，可以用其他变量分开设置	-
--steps-line-active-color	theme.color.brand.1000	步骤条竖线高亮项颜色，默认和不高亮颜色一致	-
--steps-icon-active-color	theme.color.brand.1000	步骤条图标高亮颜色，默认跟随主题色	-
--steps-dot-active-color	theme.color.brand.1000	步骤条圆点图标高亮颜色，默认跟随主题色	-
--steps-title-active-color	theme.color.brand.1000	步骤条标题高亮颜色，默认跟随主题色	-
--steps-subtitle-active-color	theme.color.brand.1000	步骤条副标题高亮颜色，默认跟随主题色	-
--steps-desc-active-color	theme.color.gray.texticon.900	步骤条描述内容高亮颜色	-
--steps-time-active-color	theme.color.gray.texticon.900	步骤条最下方内容高亮颜色	-

ti-step-item API

属性 Properties

名称	类型	必填	默认值	说明	备注
title	string	否	-	标题文字	-
subtitle	string	否	-	标题右侧区域，副标题文字	-
description	string	否	-	主体，描述文字	-
time	string	否	-	最下方区域，如时间	-
icon	string	否	-	图标名称	-
checked	boolean	否	-	是否高亮，权重比current高	-
subtitle-align	left | right	否	-	副标题的对齐方式	-
use-title-lot	boolean	否	false	是否使用标题区域插槽	-
use-subtitle-slot	boolean	否	false	是否使用副标题区域插槽	-
use-description-slot	boolean	否	false	是否使用描述文字区域插槽	-
use-time-slot	boolean	否	false	是否使用最下方区域插槽	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

插槽 Slots

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