Utilisation
Utilisez la directive v-model pour contrôler la valeur de la progression.
<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>Utilisez le composant
ProgressGroup pour diviser une seule barre en plusieurs segments qui s'additionnent pour un total.max
Utilisez le prop max pour définir la valeur maximale de la progression.
<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>Utilisez le prop max avec un tableau de chaînes pour afficher le pas actif sous la barre, la valeur maximale de la progression est la longueur du tableau.
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>Statut
Utilisez le prop status pour afficher la valeur de progression actuelle au-dessus de la barre.
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>Le statut suit la fin de la barre, utilisez
:ui="{ status: 'w-full' }" pour lui faire couvrir toute la largeur à la place.Indéterminé
Lorsqu 'aucun v-model n'est défini ou que la valeur est null, la progression devient_indéterminée_. La barre de progression est animée comme un carousel, mais vous pouvez la modifier en utilisant la prop. animation.
<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>animation
Utilisez la prop animation pour changer l'animation de la progression en un carrousel inverse, une barre oscillante ou une barre élastique.
<template>
<UProgress animation="swing" />
</template>L'animation est automatiquement désactivée lorsque l'utilisateur préfère un mouvement réduit, la barre indéterminée est affichée comme une impulsion pleine largeur à la place.
Orientation
Utilisez la prop orientation pour modifier l'orientation de Progress. Defaults à horizontal.
<template>
<UProgress orientation="vertical" class="h-48" />
</template>couleur
Utilisez le prop color pour changer la couleur de la progression.
<template>
<UProgress color="neutral" />
</template>Ce prop accepte également toute valeur de couleur CSS pour les palettes en dehors du thème.
Size
Utilisez le prop size pour modifier la taille de la progression.
<template>
<UProgress size="xl" />
</template>Résolu
Utilisez le prop inverted pour inverser visuellement la progression.
<template>
<UProgress inverted v-model="value" />
</template>api
Props équipement
| 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; } |
Emits
| Event | Type |
|---|---|
update:modelValue | [value: string[] | undefined] |
update:max | [value: number] |
Thème
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'
}
}
}
})
]
})Changelog écrit
No recent changes