Progress 进度条

介绍

使用指南

一般用法

<tms-progress percent="{{50}}"/>

不可用状态

<tms-progress active="{{false}}"/>

自定义文字

<tms-progress pivotText=">>>"/>

自定义厚度

<tms-progress bar-height="{{15}}"/>

自定义颜色

<tms-progress percent="{{80}}" bar-color="green"/>

API

参数	说明	类型	可选值	默认值
percent	百分比数值	Number	—	0
bar-color	进度条颜色	String	—	linear-gradient(270deg, #75A6FF 0%, #0075FF 100%)
bar-height	进度条高度	Number	—	4px
show-right-percent	在右侧显示百分比数值	Boolean	—	false
show-arrow	在进度条内显示导流箭头	Boolean	—	false
active	正常或置灰状态	Boolean	—	true
hide-pivot	隐藏百分比文字	Boolean	—	false
pivot-text	自定义百分比文字	String	—	—
pivot-style	中间文字元素样式	String	—	—

EVENTS

CSS变量

// 进度条高度
--progress-bar-height: 8rpx;
// 进度条颜色
--progress-bar-color: linear-gradient(270deg, #75A6FF 0%, #0075FF 100%);
// 进度条锚点背景颜色
--progress-pivot-background: #0075FF;
// 进度条锚点文本颜色
--progress-pivot-color: #FFF;
// 进度条锚点字体大小
--progress-pivot-font-size: 24rpx;
// 进度条未到达部分背景色
--progress-bar-background-color: #eceef2;

FAQ