mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
152 lines
2.6 KiB
Markdown
152 lines
2.6 KiB
Markdown
---
|
|
title: 'Progress'
|
|
description: Show a horizontal bar to indicate task progression.
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Progress.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
Pass an integer as the `value` from `0` to `100` to the Progress bar component.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
value: 70
|
|
---
|
|
::
|
|
|
|
::callout{icon="i-heroicons-light-bulb"}
|
|
Check out the [Range](/forms/range) component for forms.
|
|
::
|
|
|
|
### Max
|
|
|
|
You may also set the `max` number to set the maximum progress value, which will be relative to 100% percent.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
value: 2
|
|
max: 5
|
|
options:
|
|
- name: max
|
|
restriction: only
|
|
values:
|
|
- 3
|
|
- 4
|
|
- 5
|
|
- 6
|
|
- 7
|
|
---
|
|
::
|
|
|
|
### Steps
|
|
|
|
You can set an array of named steps in the `max` prop to show the active step, at the same time it sets the maximum value.
|
|
|
|
The first step is always shown at `0%`, making the last `100%`.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
value: 0
|
|
max:
|
|
- Waiting to start
|
|
- Cloning...
|
|
- Migrating...
|
|
- Deployed!
|
|
excludedProps:
|
|
- max
|
|
---
|
|
::
|
|
|
|
### Progress indicator
|
|
|
|
You can add a numeric indicator, which will show the percent on top the progress track.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
value: 20
|
|
indicator: true
|
|
---
|
|
::
|
|
|
|
### Indeterminate
|
|
|
|
By not setting a `value`, or setting it as `null`, the progress bar becomes _indeterminate_. The 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-card
|
|
---
|
|
baseProps:
|
|
value: null
|
|
props:
|
|
animation: 'carousel'
|
|
options:
|
|
- name: animation
|
|
restriction: only
|
|
values:
|
|
- 'carousel'
|
|
- 'carousel-inverse'
|
|
- 'swing'
|
|
- 'elastic'
|
|
---
|
|
::
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to change the size of the progress bar.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
value: 70
|
|
props:
|
|
size: 'md'
|
|
indicator: false
|
|
excludedProps:
|
|
- value
|
|
---
|
|
::
|
|
|
|
### Style
|
|
|
|
Use the `color` prop to change the visual style of the Progress bar. The `color` can be any color from the `ui.colors` object.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
value: 70
|
|
props:
|
|
color: 'primary'
|
|
indicator: false
|
|
excludedProps:
|
|
- modelValue
|
|
---
|
|
::
|
|
|
|
## Slots
|
|
|
|
### `indicator`
|
|
|
|
You can use the `#indicator` slot to show a custom indicator above the progress bar. It receives the current `percent` of progress.
|
|
|
|
:component-example{component="progress-example-slot-indicator"}
|
|
|
|
### `step-<index>`
|
|
|
|
Use the `#step-<index>` to alter the HTML being shown for each step.
|
|
|
|
:component-example{component="progress-example-slot-step"}
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Config
|
|
|
|
:component-preset
|