介绍

以环形的方式展示当前进度。

引入

import ProgressCircle from 'sard-uniapp/components/progress-circle/progress-circle.vue'

代码演示

基础使用

使用 percent 属性设置当前进度。

<template>
  <sar-progress-circle :percent="75" />
</template>

粗细

使用 thickness 属性设置圆环的粗细，这是一个占圆环直径的百分比值。

<template>
  <sar-progress-circle :percent="50" :thickness="10" />
</template>

颜色

使用 trackColor 设置轨道颜色，使用 color 设置进度条颜色。

<template>
  <sar-progress-circle :percent="50" color="var(--sar-red)" />
</template>

尺寸

使用 size 设置圆环直径。

<template>
  <sar-progress-circle :percent="50" size="144rpx" :thickness="6" />
</template>

状态

使用 status 属性设置不同的状态。

<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 变量

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);
}