Gebruik
Gebruik de v-model-richtlijn om de waarde van de Progress te bepalen.
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<UProgress v-model="value" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(50)
</script>
<template>
<UProgress v-model="value" />
</template>Gebruik de
ProgressGroup om een enkele balk op te splitsen in meerdere segmenten die samen een totaal vormen.Max
Gebruik de max prop om de maximale waarde van de Progress in te stellen.
<script setup lang="ts">
const value = ref(3)
</script>
<template>
<UProgress v-model="value" :max="4" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(3)
</script>
<template>
<UProgress v-model="value" :max="4" />
</template>Gebruik de max prop met een array van strings om de actieve stap onder de balk weer te geven, de maximale waarde van de Progress is de lengte van de array.
Waiting...
Cloning...
Migrating...
Deploying...
Done!
<script setup lang="ts">
const value = ref(3)
</script>
<template>
<UProgress
v-model="value"
:max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(3)
</script>
<template>
<UProgress
v-model="value"
:max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
/>
</template>Status
Gebruik de status prop om de huidige voortgangswaarde boven de balk weer te geven.
50%
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<UProgress v-model="value" status />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(50)
</script>
<template>
<UProgress v-model="value" status />
</template>De status volgt het einde van de balk, gebruik
:ui="{ status: 'w-full' }" om het in plaats daarvan de volledige breedte te laten overspannen.Indeterminate
Wanneer er geen v-model is ingesteld of de waarde null is, wordt de Progress _ indeterminate _.
De voortgangsbalk is geanimeerd als een carousel, maar je kunt deze wijzigen met de animation prop.
<script setup lang="ts">
const value = ref(null)
</script>
<template>
<UProgress v-model="value" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(null)
</script>
<template>
<UProgress v-model="value" />
</template>Animatie
Gebruik de animation prop om de animatie van de Progress te veranderen in een omgekeerde carrousel, een schommelstang of een elastische stang. Standaard carousel.
<template>
<UProgress animation="swing" />
</template>De animatie wordt automatisch uitgeschakeld wanneer de gebruiker de voorkeur geeft aan verminderde beweging, de onbepaalde balk wordt weergegeven als een puls over de volledige breedte.
Oriëntatie
Gebruik de orientation prop om de oriëntatie van de Progress te wijzigen. Standaard op horizontal.
<template>
<UProgress orientation="vertical" class="h-48" />
</template>Kleur
Gebruik de color prop om de kleur van de Progress te veranderen.
<template>
<UProgress color="neutral" />
</template>Deze prop accepteert ook elke CSS-kleurwaarde voor paletten buiten het thema.
Grootte
Gebruik de size prop om de grootte van de Progress te wijzigen.
<template>
<UProgress size="xl" />
</template>Omgekeerd
Gebruik de inverted prop om de voortgang visueel om te keren.
<template>
<UProgress inverted v-model="value" />
</template>API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
max | number | any[]The maximum progress value. | |
status | boolean Display the current progress value. | |
inverted | false | boolean Whether the progress is visually inverted. |
size | 'md' | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" |
color | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | stringAny theme color, or any CSS color value for palettes outside the theme. |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation of the progress bar. |
animation | 'carousel' | "carousel" | "carousel-inverse" | "swing" | "elastic"The animation of the progress bar. |
getValueLabel | (value: number | null , max: number): string | undefinedA 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 | null , max: number): string | undefinedA function to get the accessible value text representing the current value in a human-readable format. | |
modelValue | null | null | numberThe progress value. Can be bind as |
ui | { root?: SlotClass; base?: SlotClass; indicator?: SlotClass; status?: SlotClass; steps?: SlotClass; step?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
status | { percent?: number | undefined; } |
Uitzendt
| Event | Type |
|---|---|
update:modelValue | [value: string[] | undefined] |
update:max | [value: number] |
Thema
app.config.ts
export default defineAppConfig({
ui: {
progress: {
slots: {
root: 'gap-2',
base: 'relative overflow-hidden rounded-full bg-accented',
indicator: 'rounded-full size-full transition-transform duration-200 ease-out motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-pulse',
status: 'flex text-dimmed duration-200 ease-out motion-reduce:transition-none',
steps: 'grid items-end',
step: 'truncate text-end row-start-1 col-start-1 transition-opacity ease-out'
},
variants: {
animation: {
carousel: '',
'carousel-inverse': '',
swing: '',
elastic: ''
},
color: {
primary: {
indicator: 'bg-primary',
steps: 'text-primary'
},
secondary: {
indicator: 'bg-secondary',
steps: 'text-secondary'
},
success: {
indicator: 'bg-success',
steps: 'text-success'
},
info: {
indicator: 'bg-info',
steps: 'text-info'
},
warning: {
indicator: 'bg-warning',
steps: 'text-warning'
},
error: {
indicator: 'bg-error',
steps: 'text-error'
},
neutral: {
indicator: 'bg-inverted',
steps: 'text-highlighted'
}
},
size: {
'2xs': {
status: 'text-xs',
steps: 'text-xs'
},
xs: {
status: 'text-xs',
steps: 'text-xs'
},
sm: {
status: 'text-sm',
steps: 'text-sm'
},
md: {
status: 'text-sm',
steps: 'text-sm'
},
lg: {
status: 'text-sm',
steps: 'text-sm'
},
xl: {
status: 'text-base',
steps: 'text-base'
},
'2xl': {
status: 'text-base',
steps: 'text-base'
}
},
step: {
active: {
step: 'opacity-100'
},
first: {
step: 'opacity-100 text-muted'
},
other: {
step: 'opacity-0'
},
last: {
step: ''
}
},
orientation: {
horizontal: {
root: 'w-full flex flex-col',
base: 'w-full',
status: 'flex-row items-center justify-end w-(--percent) min-w-fit transition-[width]'
},
vertical: {
root: 'h-full flex flex-row-reverse',
base: 'h-full',
status: 'flex-col justify-end h-(--percent) min-h-fit transition-[height]'
}
},
inverted: {
true: {
status: 'self-end'
}
}
},
compoundVariants: [
{
inverted: true,
orientation: 'horizontal',
class: {
step: 'text-start',
status: 'flex-row-reverse'
}
},
{
inverted: true,
orientation: 'vertical',
class: {
steps: 'items-start',
status: 'flex-col-reverse'
}
},
{
orientation: 'horizontal',
size: '2xs',
class: 'h-px'
},
{
orientation: 'horizontal',
size: 'xs',
class: 'h-0.5'
},
{
orientation: 'horizontal',
size: 'sm',
class: 'h-1'
},
{
orientation: 'horizontal',
size: 'md',
class: 'h-2'
},
{
orientation: 'horizontal',
size: 'lg',
class: 'h-3'
},
{
orientation: 'horizontal',
size: 'xl',
class: 'h-4'
},
{
orientation: 'horizontal',
size: '2xl',
class: 'h-5'
},
{
orientation: 'vertical',
size: '2xs',
class: 'w-px'
},
{
orientation: 'vertical',
size: 'xs',
class: 'w-0.5'
},
{
orientation: 'vertical',
size: 'sm',
class: 'w-1'
},
{
orientation: 'vertical',
size: 'md',
class: 'w-2'
},
{
orientation: 'vertical',
size: 'lg',
class: 'w-3'
},
{
orientation: 'vertical',
size: 'xl',
class: 'w-4'
},
{
orientation: 'vertical',
size: '2xl',
class: 'w-5'
},
{
orientation: 'horizontal',
animation: 'carousel',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel_2s_linear_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_linear_infinite]'
}
},
{
orientation: 'vertical',
animation: 'carousel',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_linear_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'carousel-inverse',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-inverse_2s_linear_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_linear_infinite]'
}
},
{
orientation: 'vertical',
animation: 'carousel-inverse',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_linear_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'swing',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing_2s_var(--ease-in-out)_infinite]'
}
},
{
orientation: 'vertical',
animation: 'swing',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing-vertical_2s_var(--ease-in-out)_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'elastic',
class: {
indicator: 'relative motion-safe:data-[state=indeterminate]:animate-[elastic_2s_var(--ease-in-out)_infinite]'
}
},
{
orientation: 'vertical',
animation: 'elastic',
class: {
indicator: 'relative motion-safe:data-[state=indeterminate]:animate-[elastic-vertical_2s_var(--ease-in-out)_infinite]'
}
}
],
defaultVariants: {
animation: 'carousel',
color: 'primary',
size: 'md'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
progress: {
slots: {
root: 'gap-2',
base: 'relative overflow-hidden rounded-full bg-accented',
indicator: 'rounded-full size-full transition-transform duration-200 ease-out motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-pulse',
status: 'flex text-dimmed duration-200 ease-out motion-reduce:transition-none',
steps: 'grid items-end',
step: 'truncate text-end row-start-1 col-start-1 transition-opacity ease-out'
},
variants: {
animation: {
carousel: '',
'carousel-inverse': '',
swing: '',
elastic: ''
},
color: {
primary: {
indicator: 'bg-primary',
steps: 'text-primary'
},
secondary: {
indicator: 'bg-secondary',
steps: 'text-secondary'
},
success: {
indicator: 'bg-success',
steps: 'text-success'
},
info: {
indicator: 'bg-info',
steps: 'text-info'
},
warning: {
indicator: 'bg-warning',
steps: 'text-warning'
},
error: {
indicator: 'bg-error',
steps: 'text-error'
},
neutral: {
indicator: 'bg-inverted',
steps: 'text-highlighted'
}
},
size: {
'2xs': {
status: 'text-xs',
steps: 'text-xs'
},
xs: {
status: 'text-xs',
steps: 'text-xs'
},
sm: {
status: 'text-sm',
steps: 'text-sm'
},
md: {
status: 'text-sm',
steps: 'text-sm'
},
lg: {
status: 'text-sm',
steps: 'text-sm'
},
xl: {
status: 'text-base',
steps: 'text-base'
},
'2xl': {
status: 'text-base',
steps: 'text-base'
}
},
step: {
active: {
step: 'opacity-100'
},
first: {
step: 'opacity-100 text-muted'
},
other: {
step: 'opacity-0'
},
last: {
step: ''
}
},
orientation: {
horizontal: {
root: 'w-full flex flex-col',
base: 'w-full',
status: 'flex-row items-center justify-end w-(--percent) min-w-fit transition-[width]'
},
vertical: {
root: 'h-full flex flex-row-reverse',
base: 'h-full',
status: 'flex-col justify-end h-(--percent) min-h-fit transition-[height]'
}
},
inverted: {
true: {
status: 'self-end'
}
}
},
compoundVariants: [
{
inverted: true,
orientation: 'horizontal',
class: {
step: 'text-start',
status: 'flex-row-reverse'
}
},
{
inverted: true,
orientation: 'vertical',
class: {
steps: 'items-start',
status: 'flex-col-reverse'
}
},
{
orientation: 'horizontal',
size: '2xs',
class: 'h-px'
},
{
orientation: 'horizontal',
size: 'xs',
class: 'h-0.5'
},
{
orientation: 'horizontal',
size: 'sm',
class: 'h-1'
},
{
orientation: 'horizontal',
size: 'md',
class: 'h-2'
},
{
orientation: 'horizontal',
size: 'lg',
class: 'h-3'
},
{
orientation: 'horizontal',
size: 'xl',
class: 'h-4'
},
{
orientation: 'horizontal',
size: '2xl',
class: 'h-5'
},
{
orientation: 'vertical',
size: '2xs',
class: 'w-px'
},
{
orientation: 'vertical',
size: 'xs',
class: 'w-0.5'
},
{
orientation: 'vertical',
size: 'sm',
class: 'w-1'
},
{
orientation: 'vertical',
size: 'md',
class: 'w-2'
},
{
orientation: 'vertical',
size: 'lg',
class: 'w-3'
},
{
orientation: 'vertical',
size: 'xl',
class: 'w-4'
},
{
orientation: 'vertical',
size: '2xl',
class: 'w-5'
},
{
orientation: 'horizontal',
animation: 'carousel',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel_2s_linear_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_linear_infinite]'
}
},
{
orientation: 'vertical',
animation: 'carousel',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-vertical_2s_linear_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'carousel-inverse',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-inverse_2s_linear_infinite] motion-safe:data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_linear_infinite]'
}
},
{
orientation: 'vertical',
animation: 'carousel-inverse',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_linear_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'swing',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing_2s_var(--ease-in-out)_infinite]'
}
},
{
orientation: 'vertical',
animation: 'swing',
class: {
indicator: 'motion-safe:data-[state=indeterminate]:animate-[swing-vertical_2s_var(--ease-in-out)_infinite]'
}
},
{
orientation: 'horizontal',
animation: 'elastic',
class: {
indicator: 'relative motion-safe:data-[state=indeterminate]:animate-[elastic_2s_var(--ease-in-out)_infinite]'
}
},
{
orientation: 'vertical',
animation: 'elastic',
class: {
indicator: 'relative motion-safe:data-[state=indeterminate]:animate-[elastic-vertical_2s_var(--ease-in-out)_infinite]'
}
}
],
defaultVariants: {
animation: 'carousel',
color: 'primary',
size: 'md'
}
}
}
})
]
})Wijzigingsgelog
No recent changes