跳到主要内容

步骤条 Steps

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

API

安装使用​

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

用法示例​

基础用法​

const App: React.FC = () => {
  const options = [
    {
      title: "标题文字",
      subtitle: "副标题",
      description: "详细内容文字，详细内容文字，详细内容文字",
      time: "2018.07.06 09:52:42",
    },
    {
      title: "标题文字",
      subtitle: "副标题",
      description: "详细内容文字，详细内容文字，详细内容文字",
      time: "2018.07.06 09:52:42",
    }
  ]
  return (
   <TiSteps options={options} current={1} />
  )
}

设置高亮项​

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

const App: React.FC = () => {
  const options = [
    {
      title: "标题文字",
      subtitle: "副标题",
      description: "详细内容文字，详细内容文字，详细内容文字",
      time: "2018.07.06 09:52:42",
    },
    {
      title: "标题文字",
      subtitle: "副标题",
      description: "详细内容文字，详细内容文字，详细内容文字",
      time: "2018.07.06 09:52:42",
      checked: true
    }
  ]
  return (
   <TiSteps options={options} current={0} />
  )
}

设置副标题右对齐​

const App: React.FC = () => {
  const options = [
    {
      title: "标题文字",
      subtitle: "副标题",
      description: "详细内容文字，详细内容文字，详细内容文字",
      time: "2018.07.06 09:52:42",
    }
  ]
  return (
   <TiSteps options={options} subtitleAlign="right" />
  )
}

自定义样式​

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

const App: React.FC = () => {
  const options = [
    {
      title: "标题文字",
      subtitle: "副标题",
      description: "详细内容文字，详细内容文字，详细内容文字",
      time: "2018.07.06 09:52:42",
      style: {
        '--steps-title-font-size': '12px',
        '--steps-desc-color': red,
      }
    }
  ]
  return (
   <TiSteps options={options} />
  )
}

配合TiStepItem使用​

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

<TiSteps>
  <TiStepItem
    title="标题文字"
    subtitle="副标题"
    useDescriptionSlot
  >
    <div slot="description">详细内容文字</div>  
  </TiStepItem>
  <TiStepItem
    useTitleSlot
    useSubtitleSlot
    useDescriptionSlot
    useTimeSlot
  >
    <div slot="title">标题文字</div>  
    <div slot="subtitle">副标题文字</div>  
    <div slot="description">详细内容文字</div>  
    <div slot="time">时间</div>  
  </TiStepItem>
</TiSteps>

TiSteps API​

属性 Properties​

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

Option​

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

TiStepItem API​

属性 Properties​

名称类型必填默认值说明备注
titlestring否-标题文字-
subtitlestring否-标题右侧区域，副标题文字-
descriptionstring否-主体，描述文字-
timestring否-最下方区域，如时间-
iconstring否-图标名称-
checkedboolean否-是否高亮，权重比current高-
subtitleAlignleft | right否-副标题的对齐方式-
useTitleSlotboolean否false是否使用标题区域插槽-
useSubtitleSlotboolean否false是否使用副标题区域插槽-
useDescriptionSlotboolean否false是否使用描述文字区域插槽-
useTimeSlotboolean否false是否使用最下方区域插槽-
hasLineboolean否-是否显示左侧边线-
extStylestring | Record<string, string> 否-根节点样式-

插槽 Slots​

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