跳到主要内容

进度条 Progress

表示当前任务的进度。

安装使用

{
// 原生小程序
"usingComponents": {
"ti-progress": "@titian-design/weapp/progress/index",
"ti-circle-progress": "@titian-design/weapp/circle-progress/index"
},
// titan-cli搭建的项目
"usingComponents": {
"ti-progress": "platform://titian-mp/ti-progress",
"ti-circle-progress": "platform://titian-mp/ti-circle-progress",
}
}

用法示例

基本使用

<ti-progress />
<ti-progress value="{{80}}" />
<ti-circle-progress value="{{80}}" />

设置缓冲进度

<ti-progress value="{{60}}" buffer="{{80}}" />
<ti-circle-progress value="{{60}}" buffer="{{80}}" />

设置进度条宽度

<ti-progress value="{{50}}" stroke-width="{{20}}" />
<ti-circle-progress value="{{80}}" stroke-width="{{20}}" />

修改展示进度值、颜色等

<ti-progress value="{{80}}" show-progress />
<ti-circle-progress value="{{80}}" show-progress />

<ti-progress value="{{80}}" color="#2a6ae9" />
<ti-circle-progress value="{{80}}" color="#2a6ae9" />

<ti-progress value="{{80}}" gradient-color="{{gradientColor}}" />

ti-progress API

属性 Properties

名称类型是否必填默认值说明备注
sizenumber72进度值大小-
valuenumber0进度值,取值范围 0-100-
buffernumber0缓冲值,取值范围 0-100-
show-progressbooleanfalse是否展示进度值,默认不展示-
colorstring-进度条颜色,默认为主题色-
stroke-widthnumber8进度条宽度,默认为 8px此时单位为 rpx
stroke-colorstring-进度条轨道颜色,默认为进度条值的 10%-
buffer-bg-colorstring-进度条缓冲轨道颜色,默认为进度条值的 30%-
gradient-colorGradientColor-进度条颜色为渐变色,需要设置 fromto-

GradientColor

interface GradientColor {
from: string;
to: string;
}

可扩展样式名 External Class

类名说明备注
ext-class扩展样式类名-
text-class进度条文字扩展样式类名-

CSS 变量 CSS Variables

变量默认值说明备注
--progress-margin-v8rpx垂直方向外间距-
--progress-margin-h0水平方向外间距-
--progress-height8rpx进度条高度-
--progress-radiuscalc(var(--base-radius-size, 0px) + 12px)圆角大小-
--progress-bar-colorrgb(@theme-r, @theme-g, @theme-b)轨道颜色-
--progress-bar-radiuscalc(var(--base-radius-size, 0px) + 12px)轨道圆角大小-
--progress-pivot-margin-left8rpx左侧外间距-
--progress-pivot-colorrgb(@theme-r, @theme-g, @theme-b)进度条内容颜色-

ti-circle-progress API

属性 Properties

名称类型是否必填默认值说明备注
sizenumber72进度值大小-
valuenumber0进度值,取值范围 0-100-
buffernumber0缓冲值,取值范围 0-100-
show-progressbooleanfalse是否展示进度值,默认不展示-
colorstring-进度条颜色,默认为主题色-
stroke-widthnumber8进度条宽度,默认为 8px-
stroke-colorstring-进度条轨道颜色,默认为进度条值的 10%-
buffer-bg-colorstring-进度条缓冲轨道颜色,默认为进度条值的 30%-
fontstring-canvas font 属性-