Bearbeiten
Verwenden Sie die v-model-Direktive, um den Wert des Progress-Elements zu steuern.
<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>Verwenden Sie die Komponente
ProgressGroup, um einen einzelnen Balken in mehrere Segmente aufzuteilen, die sich zu einer Summe addieren.Max ist
Verwenden Sie die Prop max, um den maximalen Wert des Progress festzulegen.
<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>Verwenden Sie die max prop mit einem Array von Strings, um den aktiven Schritt unter der Leiste anzuzeigen, der maximale Wert des Fortschritts ist die Länge des Arrays.
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 Bearbeiten
Verwenden Sie die status prop, um den aktuellen Fortschrittswert über dem Balken anzuzeigen.
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>Der Status verfolgt das Ende der Leiste, verwenden Sie stattdessen
:ui="{ status: 'w-full' }", um die gesamte Breite zu überspannen.Indeterminate (unbestimmt)
Wenn kein v-model gesetzt ist oder der Wert null ist, wird der Progress_indeterminate_. Der Fortschrittsbalken wird als carousel animiert, aber Sie können ihn mit dem 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>Animation (Englisch)
Verwenden Sie die animation-Prop, um die Animation des Progress in ein inverses Karussell, eine schwingende Leiste oder eine elastische Leiste zu ändern.
<template>
<UProgress animation="swing" />
</template>Die Animation wird automatisch deaktiviert, wenn der Benutzer eine reduzierte Bewegung bevorzugt, der unbestimmte Balken wird stattdessen als Puls in voller Breite angezeigt.
Orientierung.
Verwenden Sie die orientation-Prop, um die Ausrichtung des Progress. Defaults auf horizontal zu ändern.
<template>
<UProgress orientation="vertical" class="h-48" />
</template>color kaufen
Verwenden Sie die color-Prop, um die Farbe des Progress zu ändern.
<template>
<UProgress color="neutral" />
</template>Diese Prop akzeptiert auch jeden CSS-Farbwert für Paletten außerhalb des Themas.
Größe
Verwenden Sie die size-Prop, um die Größe des Progress zu ändern.
<template>
<UProgress size="xl" />
</template>invertiert
Verwenden Sie die inverted prop, um den Fortschritt visuell umzukehren.
<template>
<UProgress inverted v-model="value" />
</template>API (englisch)
Props Bearbeiten
| 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 Bearbeiten
| Slot | Type |
|---|---|
status | { percent?: number | undefined; } |
Emits (englisch)
| Event | Type |
|---|---|
update:modelValue | [value: string[] | undefined] |
update:max | [value: number] |
Theme Bearbeiten
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 (englisch)
No recent changes