Press UI

# Circle 环形进度条

圆环形的进度条组件，支持进度渐变动画。

# 引入

import PressCircle from 'press-ui/press-circle/press-circle';

export default {
  components: {
    PressCircle,
  }
}

# 代码演示

# 基础用法

value属性表示进度条的目标进度。

<press-circle :value="30" text="text" />

# 宽度定制

通过stroke-width属性来控制进度条宽度。

<press-circle :value="value" stroke-width="6" text="宽度定制" />

# 颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<press-circle
  :value="value"
  layer-color="#eeeeee"
  color="#ee0a24"
  text="颜色定制"
/>

# 渐变色

color属性支持传入对象格式来定义渐变色。

<press-circle :value="value" :color="gradientColor" text="渐变色" />

Page({
  data: {
    value: 25,
    gradientColor: {
      '0%': '#ffd01e',
      '100%': '#ee0a24',
    },
  },
});

# 逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<press-circle
  :value="value"
  color="#07c160"
  :clockwise="false"
  text="逆时针"
/>

# 大小定制

通过size属性设置圆环直径。

<press-circle :value="value" size="120" text="大小定制" />

# API

# Props

参数 说明 类型 默认值
value 目标进度 number 0
type 指定 canvas 类型，可选值为 2d string -
size 圆环直径，默认单位为 px number 100
color 进度条颜色，传入对象格式可以定义渐变色 string | object #1989fa
layer-color 轨道颜色 string #fff
fill 填充颜色 string -
speed 动画速度（单位为 value/s） number 50
text 文字 string -
stroke-width 进度条宽度 number 4
clockwise 是否顺时针增加 boolean true

# Slots

名称 说明
- 自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖

# 在线调试

横屏

← Collapse →