介绍
以环形的方式展示当前进度。
引入
js
import ProgressCircle from 'sard-uniapp/components/progress-circle/progress-circle.vue'代码演示
基础使用
使用 percent 属性设置当前进度。
vue
<template>
<sar-progress-circle :percent="75" />
</template>粗细
使用 thickness 属性设置圆环的粗细,这是一个占圆环直径的百分比值。
vue
<template>
<sar-progress-circle :percent="50" :thickness="10" />
</template>颜色
使用 trackColor 设置轨道颜色,使用 color 设置进度条颜色。
vue
<template>
<sar-progress-circle :percent="50" color="var(--sar-red)" />
</template>尺寸
使用 size 设置圆环直径。
vue
<template>
<sar-progress-circle :percent="50" size="144rpx" :thickness="6" />
</template>状态
使用 status 属性设置不同的状态。
vue
<template>
<sar-progress-circle :percent="50" status="success" />
<sar-progress-circle
:percent="50"
status="warning"
root-style="margin-top: 20rpx"
/>
<sar-progress-circle
:percent="50"
status="error"
root-style="margin-top: 20rpx"
/>
</template>API
ProgressCircleProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| percent | 当前进度 | number | 0 |
| color | 进度条颜色 | string | - |
| track-color | 轨道颜色 | string | - |
| thickness | 进度条粗细,表示占圆环直径的百分比值 | number | 4 |
| size | 圆环尺寸 | string | - |
| status | 进度条当前状态 | 'success' | 'warning' | 'error' | - |
ProgressCircleSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-progress-circle-size: 200rpx;
--sar-progress-circle-track-color: var(--sar-secondary-bg);
--sar-progress-circle-piece-color: var(--sar-primary);
--sar-progress-circle-piece-transition-duration: var(--sar-duration);
--sar-progress-circle-text-font-size: var(--sar-text-base);
--sar-progress-circle-status-font-size: 36rpx;
--sar-progress-circle-success-color: var(--sar-success);
--sar-progress-circle-warning-color: var(--sar-warning);
--sar-progress-circle-error-color: var(--sar-danger);
}