2.3 KiB
description, links
| description | links | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| An indicator showing the progress of a task. |
|
Usage
Use the v-model directive to control the value of the Progress.
::component-code
external:
- modelValue props: modelValue: 50
::
Max
Use the max prop to set the maximum value of the Progress.
::component-code
external:
- modelValue props: modelValue: 3 max: 4
::
Use the max prop with an array of strings to display the active step under the bar, the maximum value of the Progress will be the length of the array.
::component-code
prettier: true ignore:
- max external:
- modelValue
props:
modelValue: 3
max:
- 'Waiting...'
- 'Cloning...'
- 'Migrating...'
- 'Deploying...'
- 'Done!'
::
Status
Use the status prop to display the current Progress value above the bar.
::component-code
external:
- modelValue props: modelValue: 50 status: true
::
Indeterminate
When no v-model is set or the value is null, the Progress becomes indeterminate. The progress bar will be animated as a carousel, but you can change it using the animation prop for an inverse carousel, a swinging bar or an elastic bar.
::component-code
external:
- modelValue props: modelValue: null
::
Animation
Use the animation prop to change the animation of the Progress. Defaults to carousel.
::component-code
props: animation: swing
::
Orientation
Use the orientation prop to change the orientation of the Progress. Defaults to horizontal.
::component-code
props: orientation: vertical class: 'h-96 mx-auto'
::
Color
Use the color prop to change the color of the Slider.
::component-code
props: color: gray
::
Size
Use the size prop to change the size of the Slider.
::component-code
props: size: xl
::
Inverted
Use the inverted prop to visually invert the Progress.
::component-code
props: inverted: true modelValue: 25
::
API
Props
:component-props
Slots
:component-slots
Events
:component-events
Theme
:component-theme