Progress 進度條

顯示任務完成進度的指示器，通常以進度條的形式展示。

基本用法

csacsacs

基本進度條

30%

未知狀態

未設置 / 未知

0%

尺寸

不同尺寸

小尺寸：

60%

默認尺寸：

60%

大尺寸：

60%

變體

不同變體

默認：

75%

條紋：

75%

動畫：

75%

文字位置

不同文字位置

左側：

30%

中間：

30%

右側：

30%

自定義文字格式

自定義顯示文字格式

已完成 40% 📶

顏色

自定義顏色和高度

紅色：

65%

綠色：

65%

自定義高度 (15px)：

65%

數字高度 (20)：

65%

API

屬性

屬性名	說明	類型	默認值
v-model	當前進度值	number | null	-
max	最大進度值	number	100
size	進度條尺寸	'small' | 'default' | 'large'	'default'
variant	進度條變體	'default' | 'striped' | 'animated'	'default'
showText	是否顯示進度文字	boolean	false
formatText	自定義進度文字格式	(value: number | null, max: number) => string	-

事件 Events

事件名	說明	回調參數
update	進度值變化時觸發	(value: number | null)
update:max	最大值變化時觸發	(value: number)

插槽 Slots

插槽名	說明
default	自定義內容（整個組件內的自定義區塊）
text	自定義進度文字區塊（替代預設文字顯示）

插槽用法

下面示例展示如何使用命名插槽 text 來自定義顯示的進度文字：

<template>
  <SHProgress v-model="value" :show-text="true">
    <template #text> {{ value }} / {{ max }} </template>
  </SHProgress>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(45)
const max = 100
</script>