进度条 Progress

一个用于展示任务完成进度的组件，虽然并不意味着实际上的进度。

主题颜色

进度条有 'primary'（默认）、'success'、'warning'、'danger'、'sakura' 和 'notice' 多种主题。

<template>
	<px-space direction="vertical">
		<px-progress :percentage="progress"> </px-progress>
		<px-progress :percentage="progress" theme="notice"> </px-progress>
		<px-progress :percentage="progress" theme="success"> </px-progress>
		<px-progress :percentage="progress" theme="warning"> </px-progress>
		<px-progress :percentage="progress" theme="danger"> </px-progress>
		<px-progress :percentage="progress" theme="sakura"> </px-progress>
		<px-button-group>
			<px-button theme="info" @click="progress = Math.max(0, progress - 10)">
				<template #icon>
					<IconMinus />
				</template>
			</px-button>
			<px-button theme="info" @click="progress = Math.min(100, progress + 10)">
				<template #icon>
					<IconPlus />
				</template>
			</px-button>
		</px-button-group>
	</px-space>
</template>

<script setup lang="ts">
import { IconMinus, IconPlus } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'

const progress = ref(10)
</script>

样式变体

支持两种样式：'solid'（默认）和 'checkered'（棋盘格）。

<template>
	<px-space direction="vertical">
		<px-progress variant="checkered" :percentage="16.67"> </px-progress>
		<px-progress variant="checkered" :percentage="33.33" theme="notice"> </px-progress>
		<px-progress variant="checkered" :percentage="50" theme="success"> </px-progress>
		<px-progress variant="checkered" :percentage="66.67" theme="warning"> </px-progress>
		<px-progress variant="checkered" :percentage="83.33" theme="danger"> </px-progress>
		<px-progress variant="checkered" :percentage="100" theme="sakura"> </px-progress>
	</px-space>
</template>

指示内容

通过 indicator 插槽可以自定义指示内容（例如显示百分比文本）。组件会自动定位，indicatorPlacement 属性用于控制指示内容位于条内（'inside'）或外侧（'outside'）。

30%

70%

<template>
	<px-space direction="vertical">
		<px-progress :percentage="30" theme="success">
			<template #indicator="{ percentage }">
				<span>{{ percentage }}%</span>
			</template>
		</px-progress>
		<px-progress :percentage="70" variant="checkered" indicator-placement="outside">
			<template #indicator="{ percentage }">
				<px-text-outline :outline-width="2" color="var(--px-primary-6)"
					>{{ percentage }}%</px-text-outline
				>
			</template>
		</px-progress>
	</px-space>
</template>

进度条尺寸

通过 size 属性控制高度，可选 'small'、'medium'（默认）、'large' 或直接传入数字（像素）。

<template>
	<px-space direction="vertical">
		<px-progress :percentage="20" size="small"> </px-progress>
		<px-progress :percentage="26" variant="checkered" theme="success"> </px-progress>
		<px-progress :percentage="36" size="large" theme="sakura"> </px-progress>
		<px-progress :percentage="52" :size="52" theme="danger"> </px-progress>
	</px-space>
</template>

前 / 后 插槽

使用 prepend 与 append 插槽可以在进度条前后添加内容（如标签或图标）。

Progress: 100%

Status: Complete

Message

<template>
	<px-space direction="vertical">
		<px-progress :percentage="100">
			<template #prepend="{ percentage }">
				<span>Progress: {{ percentage }}%</span>
			</template>
			<template #append="{ percentage }">
				<span>Status: {{ percentage === 100 ? 'Complete' : 'In Progress' }}</span>
			</template>
		</px-progress>
		<px-progress :percentage="100" theme="success">
			<template #prepend> Message </template>
		</px-progress>
	</px-space>
</template>

自定义颜色

通过 color 传入自定义颜色（支持 rgb/rgba 字符串或 3/4/6/8 位十六进制），组件会基于该颜色生成色板。可使用 trackBackgroundColor 覆盖轨道背景色。

<template>
	<px-space direction="vertical">
		<px-progress :percentage="20" color="#3B82F6"> </px-progress>
		<px-progress :percentage="60" color="#F59E0B" track-color="#FDE3B2"> </px-progress>
		<px-progress :percentage="100" variant="checkered" color="#8B5CF6"> </px-progress>
	</px-space>
</template>

API

ProgressProps

属性	类型	可选	默认值	描述	版本
percentage	number	是	0	数值，表示完成进度（0-100）。	0.1.0
variant	'solid' | 'checkered'	是	'solid'	进度条的样式变体。	0.1.0
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice'	是	'primary'	进度条的主题。	0.1.0
size	'medium' | 'large' | 'small'	是	'medium'	进度条的尺寸，输入数字时单位为 px。	0.1.0
gap	number	是	2	留白间隔（px），用于边框内间距。	0.1.0
indicatorPlacement	'inside' | 'outside'	是	'inside'	提示内容的位置，位于进度条填充部分的内侧还是外侧。	0.1.0
color	string	是		自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。	0.1.0
color	string	是		自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。	0.1.0
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能，常用于被容器元素影响尺寸，进而 canvas 绘制异常的情况。	0.1.0

ProgressSlots

插槽	参数	描述	版本
append	percentage: number	在进度条后方的插槽。	0.1.0
prepend	percentage: number	在进度条前方的插槽。	0.1.0
indicator	percentage: number	进度条里面的提示内容插槽。	0.1.0