步骤条 Steps

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

使用

API

安装使用

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

用法示例

基础用法

codesanbox

copy

code

import React from 'react';
import { TiSteps } from 'titian-h5-react';

export default function App() {
  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} />;
}

设置副标题右对齐

codesanbox

copy

code

import React from 'react';
import { TiSteps } from 'titian-h5-react';

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

配合TiStepItem使用

详细内容文字

标题文字

副标题文字

详细内容文字

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

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

codesanbox

copy

code

import React from 'react';
import { TiSteps, TiStepItem } from 'titian-h5-react';

export default function App() {
  return (
    <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">时间: {new Date().toISOString()}</div>
      </TiStepItem>
    </TiSteps>
  );
}

设置高亮项

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

codesanbox

copy

code

import React from 'react';
import { TiSteps } from 'titian-h5-react';

export default function App() {
  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} />;
}

自定义样式

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

codesanbox

copy

code

import React from 'react';
import { TiSteps } from 'titian-h5-react';

export default function App() {
  const 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',
      },
    },
  ];
  return <TiSteps options={options} />;
}

TiSteps API

属性 Properties

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

Option

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

TiStepItem API

属性 Properties

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

插槽 Slots

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