跳到主要内容

步骤条 Steps

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

安装使用

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} />
)
}

TiSteps API

属性 Properties

名称类型必填默认值说明备注
optionsArray<Option>-数据项,Option类型-
currentnumber | Array<number>0高亮项索引-
activeColorstring-高亮项颜色-
iconstring-每项图标名-
subtitleAlignleft | rightleft副标题的对齐方式-
extStylestring | 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步骤条最下方内容高亮颜色-