ThorUI文档

# tui-steps 步骤条

介绍

Steps步骤条： 支持横向与纵向以及基本样式设置。

特别说明

步骤条组件中引入了组件 tui-icon，使用此组件需要同时将组件 tui-icon 组件引入到项目中。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiSteps from "@/components/thorui/tui-steps/tui-steps.vue"
export default {
	components:{
		tuiSteps
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-steps": "/components/thorui/tui-steps/tui-steps"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

水平方向

通过 items 属性设置步骤项。 spacing 属性为间距，item项宽度。activeSteps 属性为当前进行至哪一步骤。

<!--uni-app-->
<tui-steps :items="items" spacing="180rpx" :activeSteps="activeSteps"></tui-steps>

<!--微信小程序-->
<tui-steps items="{{items}}" spacing="180rpx" activeSteps="{{activeSteps}}"></tui-steps>

//data数据
{
	items: [{
		title: "步骤一",
		desc: "2020-04-01"
	}, {
		title: "步骤二",
		desc: "2020-04-01"
	}, {
		title: "步骤三",
		desc: "2020-04-01"
	}, {
		title: "步骤四",
		desc: "2020-04-01"
	}],
	activeSteps: 1
}
数字步骤

通过 type 属性设置步骤条类型。1-默认步骤 ，2-数字步骤。

<!--uni-app-->
<tui-steps :type="2" :items="items" spacing="180rpx" :activeSteps="activeSteps"></tui-steps>

<!--微信小程序-->
<tui-steps type="{{2}}" items="{{items}}" spacing="180rpx" activeSteps="{{activeSteps}}"></tui-steps>
垂直方向步骤条

通过 direction 属性设置步骤条方向。row-水平方向 ，column-垂直方向。默认为 row 水平方向。

<!--uni-app-->
<tui-steps direction="column" :items="items" spacing="180rpx" :activeSteps="activeSteps"></tui-steps>

<!--微信小程序-->
<tui-steps direction="column" items="{{items}}" spacing="180rpx" activeSteps="{{activeSteps}}"></tui-steps>

# Slots

none

# Props

参数 类型 说明 默认值
type Number 1-默认步骤 2-数字步骤 1
spacing String 间距 160rpx
direction String 方向 row column row
activeColor String 激活状态成功颜色 #5677fc
deactiveColor String 未激活状态颜色 #999999
titleSize Number title字体大小 28
bold Boolean title是否粗体 false
descSize Number desc字体大小 24
activeSteps Number 当前步骤 -1
lineStyle String 线条样式 同border线条样式 solid
items Array 步骤项 [ ]
backgroundColor String 自定义item内容时背景色 #fff
items 属性 Object对象参数说明
[{
   title: "标题",
   desc: "描述",
   name:"字体图标name值，请查看tui-icon组件", 
   size:"字体图标大小，单位px",
   icon:"图片图标地址", 
   activeIcon:"已完成步骤显示的图片图标地址"
}]

# Events

事件名 说明 回调参数
click 步骤点击事件 {index: Number} //当前点击的步骤索引

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-drawer 抽屉 →