Progress
Un indicador que muestra el progreso de una tarea.
xph0000xUso
Utilice la directiva v-model para controlar el valor del progreso.
<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>Utilice el componente
ProgressGroup para dividir una sola barra en varios segmentos que se suman a un total.Max (Edición española)
Utilice el prop max para establecer el valor máximo del Progreso.
<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>Utilice el prop max con una matriz de cadenas para mostrar el paso activo debajo de la barra, el valor máximo del progreso es la longitud de la matriz.
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>Estado
Utilice el prop status para mostrar el valor de progreso actual por encima de la barra.
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>El estado rastrea el final de la barra, use
:ui="{ status: 'w-full' }" para que abarque todo el ancho.indéterminé
Cuando no se establece v-model o el valor es null, el progreso se convierte en_indeterminate_. La barra de progreso se anima como carousel, pero puede cambiarlo usando el 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>Animación
Utilice el prop animation para cambiar la animación del Progreso a un carrusel inverso, una barra oscilante o una barra elástica.
<template>
<UProgress animation="swing" />
</template>La animación se deshabilita automáticamente cuando el usuario prefiere un movimiento reducido, la barra indeterminada se muestra como un pulso de ancho completo en su lugar.
Orientación
Utilice el prop orientation para cambiar la orientación de los valores predeterminados de Progress a horizontal.
<template>
<UProgress orientation="vertical" class="h-48" />
</template>Color (Edición)
Utilice el accesorio color para cambiar el color del Progress.
<template>
<UProgress color="neutral" />
</template>Este accesorio también acepta cualquier valor de color CSS para paletas fuera del tema.
Tamaño
Utilice el prop size para cambiar el tamaño de la Progress.
<template>
<UProgress size="xl" />
</template>Invertido
Utilice el soporte inverted para invertir visualmente el progreso.
<template>
<UProgress inverted v-model="value" />
</template>API (Edición española)
Props (Edición española)
| 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 (Edición española)
| Slot | Type |
|---|---|
status | { percent?: number | undefined; } |
Emisiones
| Event | Type |
|---|---|
update:modelValue | [value: string[] | undefined] |
update:max | [value: number] |
Temas
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 (Edición española)
No recent changes