Tantalum UI

Appearance

Return to top
On this page

CircleProgress 环形进度条

vue
<template>
  <ta-group title="基础用法">
    <div class="exp-circleProgress-box">
      <ta-circle-progress :percentage="percentage" />
      <ta-stepper :min="0" :max="100" v-model="percentage" />
    </div>
  </ta-group>
  <ta-group title="参数设置">
    <ul class="exp-circleProgress-list">
      <li>
        <ta-circle-progress :percentage="percentage" color="#ff4d4f"> color </ta-circle-progress>
      </li>
      <li>
        <ta-circle-progress :percentage="percentage" :strokeWidth="2">
          strokeWidth
        </ta-circle-progress>
      </li>
      <li>
        <ta-circle-progress :percentage="percentage" :size="80"> size </ta-circle-progress>
      </li>
    </ul>
  </ta-group>
  <ta-group title="Slot default">
    <div class="exp-circleProgress-box">
      <ta-circle-progress :percentage="percentage">
        <template #default="{ progress }"> 已抢{{ progress }} </template>
      </ta-circle-progress>
    </div>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'ExpCircleProgress',
  setup() {
    return {
      percentage: ref(50)
    }
  }
})
</script>

Import

js
import { TaCircleProgress } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
percentagestring | number是百分比，例如：50
sizestring | number100否宽高，单位 px
stroke-widthstring | number5.37否进度条宽度，单位 px
colorstring否进度条激活色

Slots

内容区（#default）

vue
<ta-circle-progress :percentage="percentage">
  <template #default="{ progress }"> 已抢{{ progress }} </template>
</ta-circle-progress>