组件
进度条
显示一个水平条以指示任务进度。
用法
将一个整数作为 value 传递给进度条组件，范围从 0 到 100。
<template>
<UProgress :value="70" />
</template>
查看 范围 组件以获取表单信息。
最大值
您还可以设置 max 数值以设置最大进度值，该值将相对于 100% 百分比。
<template>
<UProgress :value="2" :max="5" />
</template>
步骤
您可以在 max 属性中设置一个命名的步骤数组以显示活动步骤，同时它还设置了最大值。
第一步始终显示在 0%，使最后一步为 100%。
等待开始
克隆中...
迁移中...
已部署！
<template>
<UProgress
:value="0"
:max="['Waiting to start', 'Cloning...', 'Migrating...', 'Deployed!']"
/>
</template>
进度指示器
您可以在进度条上方添加一个数字指示器，它将显示进度百分比。
20%
<template>
<UProgress :value="20" indicator />
</template>
不确定
如果不设置 value 或将其设置为 null，则进度条将变为不确定。 该条将像轮播一样动画，但您可以使用 animation 属性将其更改为反向轮播、摆动条或弹性条。
<template>
<UProgress animation="carousel" />
</template>
大小
使用 size 属性更改进度条的大小。
<template>
<UProgress size="md" :indicator="false" :value="70" />
</template>
样式
使用 color 属性更改进度条的视觉样式。 color 可以是 ui.colors 对象中的任何颜色。
<template>
<UProgress color="primary" :indicator="false" :value="70" />
</template>
插槽
指示器
您可以使用 #indicator 插槽在进度条上方显示自定义指示器。 它接收当前的 percent 进度。
🔥 太热了！
<script setup lang="ts">
const temp = ref(35)
const color = computed(() => {
switch (true) {
case temp.value < 10: return 'blue'
case temp.value < 20: return 'amber'
case temp.value < 30: return 'orange'
default: return 'red'
}
})
</script>
<template>
<UProgress :value="temp" :max="40" :color="color">
<template #indicator="{ percent }">
<div class="text-right" :style="{ width: `${percent}%` }">
<span v-if="temp < 10" class="text-blue-500">Too cold!</span>
<span v-else-if="temp < 20" class="text-amber-500">Warm</span>
<span v-else-if="temp < 30" class="text-orange-500">Hot</span>
<span v-else class="text-red-500 font-bold">🔥 Too hot!</span>
</div>
</template>
</UProgress>
</template>
step-<index>
使用 #step-<index> 更改每个步骤显示的 HTML。
克隆中...
迁移中...
部署中...
<script setup lang="ts">
const task = ref(1)
const steps = [
'Cloning...',
'Migrating...',
'Deploying...'
]
</script>
<template>
<UProgress :value="task" :max="steps" indicator>
<template #step-0="{ step }">
<span class="text-lime-500">
<UIcon name="i-heroicons-arrow-down-circle" /> {{ step }}
</span>
</template>
<template #step-1="{ step }">
<span class="text-amber-500">
<UIcon name="i-heroicons-circle-stack" /> {{ step }}
</span>
</template>
<template #step-2="{ step }">
<span class="text-blue-500">
<UIcon name="i-heroicons-hand-thumb-up" /> {{ step }}
</span>
</template>
</UProgress>
</template>
属性
大小
"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl"
config.default.size值
数字
空颜色
字符串
config.default.color最大值
数字 | 任何数组
100ui
{ wrapper?: string; indicator?: DeepPartial<{ container: { base: string; width: string; transition: string; }; align: string; width: string; color: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; ... 4 more ...; default?: DeepPartial<...>; } & { ....
{}动画
"carousel" | "carousel-inverse" | "swing" | "elastic"
config.default.animation指示器
布尔值
false配置
{
wrapper: 'w-full flex flex-col gap-2',
indicator: {
container: {
base: 'flex flex-row justify-end',
width: 'min-w-fit',
transition: 'transition-all'
},
align: 'text-end',
width: 'w-fit',
color: 'text-gray-400 dark:text-gray-500',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'2xl': 'text-base'
}
},
progress: {
base: 'block appearance-none border-none overflow-hidden',
width: 'w-full [&::-webkit-progress-bar]:w-full',
size: {
'2xs': 'h-px',
xs: 'h-0.5',
sm: 'h-1',
md: 'h-2',
lg: 'h-3',
xl: 'h-4',
'2xl': 'h-5'
},
rounded: 'rounded-full [&::-webkit-progress-bar]:rounded-full',
track: '[&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-bar]:dark:bg-gray-700 [@supports(selector(&::-moz-progress-bar))]:bg-gray-200 [@supports(selector(&::-moz-progress-bar))]:dark:bg-gray-700',
bar: '[&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full',
color: 'text-{color}-500 dark:text-{color}-400',
background: '[&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current',
indeterminate: {
base: 'indeterminate:relative',
rounded: 'indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full [&:indeterminate::-moz-progress-bar]:rounded-full'
}
},
steps: {
base: 'grid grid-cols-1',
color: 'text-{color}-500 dark:text-{color}-400',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'2xl': 'text-base'
}
},
step: {
base: 'transition-all opacity-0 truncate row-start-1 col-start-1',
align: 'text-end',
active: 'opacity-100',
first: 'text-gray-500 dark:text-gray-400'
},
animation: {
carousel: 'bar-animation-carousel',
'carousel-inverse': 'bar-animation-carousel-inverse',
swing: 'bar-animation-swing',
elastic: 'bar-animation-elastic'
},
default: {
color: 'primary',
size: 'md',
animation: 'carousel'
}
}