Usage
Use the v-model directive to control the value of the Progress.
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<PProgress v-model="value" />
</template>
Max
Use the max prop to set the maximum value of the Progress.
<script setup lang="ts">
const value = ref(3)
</script>
<template>
<PProgress v-model="value" :max="4" />
</template>
Use the max prop with an array of strings to display the active step under the bar, the maximum value of the Progress is the length of the array.
<script setup lang="ts">
const value = ref(3)
</script>
<template>
<PProgress
v-model="value"
:max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
/>
</template>
Status
Use the status prop to display the current Progress value above the bar.
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<PProgress v-model="value" status />
</template>
Indeterminate
When no v-model is set or the value is null, the Progress becomes indeterminate. The progress bar is animated as a carousel, but you can change it using the animation prop.
<script setup lang="ts">
const value = ref(null)
</script>
<template>
<PProgress v-model="value" />
</template>
Animation
Use the animation prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to carousel.
<template>
<PProgress animation="swing" />
</template>
Orientation
Use the orientation prop to change the orientation of the Progress. Defaults to horizontal.
<template>
<PProgress orientation="vertical" class="akar:h-48" />
</template>
Color
Use the color prop to change the color of the Slider.
<template>
<PProgress color="neutral" />
</template>
Size
Use the size prop to change the size of the Slider.
<template>
<PProgress size="xl" />
</template>
Inverted
Use the inverted prop to visually invert the Progress.
<template>
<PProgress inverted v-model="value" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
modelValue | null | numberThe progress value. Can be bind as |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation of the progress bar. |
getValueLabel | (value: number, max: number) => stringA 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, max: number) => stringA function to get the accessible value text representing the current value in a human-readable format. | |
max | number | any[]The maximum progress value. | |
size | 'md' | "md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" |
color | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" |
animation | 'carousel' | "carousel" | "carousel-inverse" | "swing" | "elastic"The animation of the progress bar. |
inverted | false | booleanWhether the progress is visually inverted. |
status | booleanDisplay the current progress value. | |
pohon | { root?: ClassValue; base?: ClassValue; indicator?: ClassValue; status?: ClassValue; steps?: ClassValue; step?: ClassValue; } |
Slots
| Slot | Type |
|---|---|
status | { percent?: number; } |
Emits
| Event | Type |
|---|---|
update:modelValue | [value: string[]] |
update:max | [value: number] |
Theme
Below is the theme configuration skeleton for the PProgress. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
progress: {
slots: {
root: '',
base: '',
indicator: '',
status: '',
steps: '',
step: ''
},
variants: {
animation: {
carousel: '',
'carousel-inverse': '',
swing: '',
elastic: ''
},
color: {
primary: {
indicator: '',
steps: ''
},
secondary: {
indicator: '',
steps: ''
},
success: {
indicator: '',
steps: ''
},
info: {
indicator: '',
steps: ''
},
warning: {
indicator: '',
steps: ''
},
error: {
indicator: '',
steps: ''
},
neutral: {
indicator: '',
steps: ''
}
},
size: {
'2xs': {
status: '',
steps: ''
},
xs: {
status: '',
steps: ''
},
sm: {
status: '',
steps: ''
},
md: {
status: '',
steps: ''
},
lg: {
status: '',
steps: ''
},
xl: {
status: '',
steps: ''
},
'2xl': {
status: '',
steps: ''
}
},
step: {
active: {
step: ''
},
first: {
step: ''
},
other: {
step: ''
},
last: {
step: ''
}
},
orientation: {
horizontal: {
root: '',
base: '',
status: ''
},
vertical: {
root: '',
base: '',
status: ''
}
},
inverted: {
true: {
status: ''
}
}
},
compoundVariants: [],
defaultVariants: {
animation: 'carousel',
color: 'primary',
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
progress: {
slots: {
root: '',
base: '',
indicator: '',
status: '',
steps: '',
step: ''
},
variants: {
animation: {
carousel: '',
'carousel-inverse': '',
swing: '',
elastic: ''
},
color: {
primary: {
indicator: '',
steps: ''
},
secondary: {
indicator: '',
steps: ''
},
success: {
indicator: '',
steps: ''
},
info: {
indicator: '',
steps: ''
},
warning: {
indicator: '',
steps: ''
},
error: {
indicator: '',
steps: ''
},
neutral: {
indicator: '',
steps: ''
}
},
size: {
'2xs': {
status: '',
steps: ''
},
xs: {
status: '',
steps: ''
},
sm: {
status: '',
steps: ''
},
md: {
status: '',
steps: ''
},
lg: {
status: '',
steps: ''
},
xl: {
status: '',
steps: ''
},
'2xl': {
status: '',
steps: ''
}
},
step: {
active: {
step: ''
},
first: {
step: ''
},
other: {
step: ''
},
last: {
step: ''
}
},
orientation: {
horizontal: {
root: '',
base: '',
status: ''
},
vertical: {
root: '',
base: '',
status: ''
}
},
inverted: {
true: {
status: ''
}
}
},
compoundVariants: [],
defaultVariants: {
animation: 'carousel',
color: 'primary',
size: 'md'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.