Steps (步骤条)

展示操作流程的步骤进度，引导用户按步骤完成任务,3.0支持内容组件滚动,内容自适度,子组件样式主题覆盖父组件样式主题

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page main-class='p-30'>
		<t-card main-class="tdr tdb mb-30" title="Steps 步骤条"
			sub-title="展示操作流程的步骤进度，引导用户按步骤完成任务,3.0支持内容组件滚动,内容自适度,子组件样式主题覆盖父组件样式主题"></t-card>
		<t-button type='p' main-class="mb-30" @click="updtateState">修改状态</t-button>
		<t-steps main-class="tdr tdb mb-30" line-class="h-2px" type="w" :current="current">
			<t-steps-item title="待付款" time="10:30">
				<t-text :type="current>0?'p':''">自定义内容测试宽度自适应</t-text>
			</t-steps-item>
			<t-steps-item title="待发货" time="11:35" type="e">

			</t-steps-item>
			<t-steps-item title="待签收" time="10:40" desc="其它内容">
				<t-text :type="current>2?'p':''" main-class="w-200"></t-text>
			</t-steps-item>
			<t-steps-item title="待评价" time="12:30">

			</t-steps-item>
		</t-steps>
		<t-section main-class="mb-30 tdr tdb" title='宽度平分+显示索引+插槽展示+设置主题+修改图标+状态' type='error'></t-section>
		<t-steps main-class="tdr tdb mb-30" line-class="h-2px" :current="2" active-icon="bell" type="s"
			:isEvenlyDistributed="true">
			<t-steps-item title="待付款" time="10:30"></t-steps-item>
			<t-steps-item title="待发货" time="11:35" type='e' activeIcon="close" activeIconmain-class="s-18">
				<t-text type='e'>缺货</t-text>
			</t-steps-item>
			<t-steps-item title="待签收" time="10:40" desc="其它内容"></t-steps-item>
			<t-steps-item title="待评价" time="12:30"></t-steps-item>
		</t-steps>
		<t-section main-class="mb-30 tdr tdb" title='纵向排列' type='error'></t-section>
		<t-steps main-class="tdr tdb mb-30" line-class="h-2px" :current="2" active-icon="bell" type="s"
			direction="vertical">
			<t-steps-item title="待付款" time="10:30">
				<t-text>自定义内容测试宽度自适应</t-text>
				<t-text
					main-class="w-200">测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行</t-text>
			</t-steps-item>
			<t-steps-item title="待发货" time="11:35" type='e' activeIcon="close" activeIconmain-class="s-18">
				<t-text>自定义内容测试宽度自适应</t-text>
				<t-text
					main-class="w-200">测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行测试内容换行</t-text>
			</t-steps-item>
			<t-steps-item main-class="ff" title="待签收" time="10:40" desc="其它内容"></t-steps-item>
			<t-steps-item title="待评价" time="12:30"></t-steps-item>
		</t-steps>
		<t-section main-class="mb-30 tdr tdb" title='纵向排列+高度平分' type='error'></t-section>
		<t-steps main-class="tdr tdb mb-30 h-600" line-class="h-2px" :current="2" active-icon="bell" type="s"
			direction="vertical" :isEvenlyDistributed="true">
			<t-steps-item title="待付款" time="10:30">
				<t-text>自定义内容测试宽度自适应</t-text>
				<t-text
					main-class="w-200">测试内容换</t-text>
			</t-steps-item>
			<t-steps-item main-class="ff" title="待签收" time="10:40" desc="其它内容"></t-steps-item>
			<t-steps-item title="待评价" time="12:30"></t-steps-item>
		</t-steps>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				current: 2
			}
		},
		methods: {
			updtateState() {
				if (this.current == 4) {
					this.current = 0
				} else {
					this.current++
				}
			}
		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
current	Number	2	当前步骤
activeIcon	String	checkbox-mark	激活图标名称
activeIconClass	String	``	激活图标的类名
indexClass	String	``	步骤索引的类名
showIndex	Boolean	true	是否显示序号
direction	String	horizontal	布局方向	horizontal: 横向 vertical: 纵向滚动
activeColor	String	``	激活状态文字颜色
barClass	String	``	步骤条的类名
inactiveColor	String	#dedede	未激活状态文字颜色
isEvenlyDistributed	Boolean	false	是否每项一部分布局

插槽

名称	返回值	说明
default	-