安裝
Terminal
pnpm dlx shadcn-vue add @admin/progressimport { AdminProgress } from '@/components/admin/progress'用法
<script setup lang="ts">import { AdminProgress } from '@/components/admin/progress'</script><template> <admin-progress class="w-64" :model-value="60" /></template>場景
動態進度
以 interval 或事件來源更新 model-value，進度條會平滑過渡。
<script setup lang="ts">import { onMounted, onUnmounted, ref } from 'vue'import { AdminProgress } from '@/components/admin/progress'const value = ref(0)let timer: ReturnType<typeof setInterval> | null = nullonMounted(() => { timer = setInterval(() => { value.value = (value.value + 10) % 110 }, 800)})onUnmounted(() => { if (timer) { clearInterval(timer) }})</script><template> <div class="flex w-72 flex-col gap-2"> <admin-progress :model-value="value" /> <span class="typo-caption-small text-text-60">{{ value }}%</span> </div></template>多項進度列表
<script setup lang="ts">import { AdminProgress } from '@/components/admin/progress'const steps = [ { label: '上傳完成', value: 100 }, { label: '處理中', value: 60 }, { label: '等待中', value: 20 }]</script><template> <div class="flex w-72 flex-col gap-4"> <div v-for="step in steps" :key="step.label" class="flex flex-col gap-1"> <div class="flex items-center justify-between typo-caption-small"> <span>{{ step.label }}</span> <span class="text-text-60">{{ step.value }}%</span> </div> <admin-progress :model-value="step.value" /> </div> </div></template>不確定進度
當進度總量未知時，傳入 model-value="null" 進入 indeterminate 狀態：進度條顯示不確定動畫並隱藏百分比文字（此時 show-value 不生效）。待取得實際進度後再改回數值即可。
<script setup lang="ts">import { ref } from 'vue'import { AdminButton } from '@/components/admin/button'import { AdminProgress } from '@/components/admin/progress'const value = ref<number | null>(null)function toggle() { value.value = value.value === null ? 40 : null}</script><template> <div class="flex w-72 flex-col gap-3"> <admin-progress :model-value="value" /> <admin-button class="self-start" @click="toggle"> {{ value === null ? '設為 40%' : '設為 indeterminate' }} </admin-button> </div></template>API 參考
組成
<template> <admin-progress :model-value="value" /></template>admin-progress
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
modelValue | number | null | undefined | 0 | The progress value. Can be bind as `v-model`. 進度值。傳入 `null` 表示 indeterminate（進度未知），此時顯示不確定動畫並隱藏百分比文字。 |
max | number | undefined | — | The maximum progress value. |
getValueLabel | ((value: number | null | undefined, max: number) => string | undefined) | undefined | — | A function to get the accessible label text in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value. |
getValueText | ((value: number | null | undefined, max: number) => string | undefined) | undefined | — | A function to get the accessible value text representing the current value in a human-readable format. |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
showValue | boolean | undefined | true | 設為 `false` 時隱藏中央百分比文字 |
更新紀錄
- feat: 新增 indeterminate 狀態並修正進度值呈現cbec6cb