X-Next

Appearance

Progress 进度条 ​

用于表达任务进度、上传状态或流程完成度。

何时使用 ​

  • 需要展示一个耗时任务的当前完成比例。
  • 需要表达上传、导入、部署、审批等流程的状态。
  • 需要用步骤段落展示离散进度。

基础用法 ​

60%
vue
<template>
  <x-progress :percent="0.6" />
  <x-progress :percent="0.6" :show-text="false" />
</template>

状态 ​

30%
45%
60%
100%
vue
<template>
  <x-progress :percent="0.3" status="normal" />
  <x-progress :percent="0.45" status="warning" />
  <x-progress :percent="0.6" status="danger" />
  <x-progress :percent="1" status="success" />
</template>

尺寸 ​

50%
60%
70%
vue
<template>
  <x-progress size="mini" :percent="0.4" />
  <x-progress size="small" :percent="0.5" />
  <x-progress :percent="0.6" />
  <x-progress size="large" :percent="0.7" />
</template>

圆形进度 ​

45%
75%
vue
<template>
  <x-progress type="circle" :percent="0.45" />
  <x-progress type="circle" :percent="0.75" status="warning" />
  <x-progress type="circle" :percent="1" status="success" />
  <x-progress type="circle" size="mini" :percent="1" status="success" />
</template>

步骤进度 ​

40%
50%
67%
vue
<template>
  <x-progress :steps="5" :percent="0.4" />
  <x-progress :steps="8" :percent="0.5" status="warning" />
  <x-progress :steps="6" :percent="0.67" status="danger" :stroke-width="8" />
</template>

自定义颜色 ​

68%
72%
55%
vue
<template>
  <x-progress :percent="0.68" color="#0d9488" track-color="#ccfbf1" />
  <x-progress :percent="0.72" :color="gradientColor" />
  <x-progress
    :percent="0.55"
    animation
    color="#2563eb"
    buffer-color="#dbeafe"
  />
</template>

<script setup lang="ts">
const gradientColor = {
  '0%': '#14b8a6',
  '55%': '#2563eb',
  '100%': '#f59e0b',
};
</script>

自定义文本 ​

75 / 100
已完成 32%
vue
<template>
  <x-progress :percent="0.75">
    <template #text="{ percent }">
      {{ Math.round(percent * 100) }} / 100
    </template>
  </x-progress>
  <x-progress type="circle" :percent="0.32">
    <template #text="{ percent }">
      已完成 {{ Math.round(percent * 100) }}%
    </template>
  </x-progress>
</template>

按需导入 ​

ts
import { Progress } from 'x-next';

Props ​

参数说明类型默认值
type进度条类型'line' | 'circle''line'
size尺寸'mini' | 'small' | 'medium' | 'large'跟随全局配置
percent当前进度，内部按 0~1 归一化渲染number0
steps步骤条数量，大于 0 时启用步骤模式number0
animation是否开启线性进度动画booleanfalse
strokeWidth进度条线宽number按尺寸计算
width线性进度条宽度；圆形进度条仅支持数字直径string | number按类型计算
color进度条颜色，支持渐变对象string | Record<string, string>-
trackColor轨道颜色string-
bufferColor线性进度条缓冲轨道颜色string | Record<string, string>-
showText是否显示文本booleantrue
status状态'normal' | 'success' | 'warning' | 'danger'percent >= 1 ? 'success' : 'normal'

Slots ​

插槽名说明参数
text自定义进度文本{ percent: number }