Progress

ProgressGitHub
显示任务进度的指示器。

用法

使用 v-model 指令来控制进度条的值。

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <UProgress v-model="value" />
</template>

最大值

使用 max 属性设置进度条的最大值。

<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <UProgress v-model="value" :max="4" />
</template>

使用 max 属性配合字符串数组可以在进度条下方显示当前步骤，此时进度条的最大值即为数组的长度。

等待中...
克隆中...
迁移中...
部署中...
完成！
<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <UProgress
    v-model="value"
    :max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
  />
</template>

状态

使用 status 属性可在进度条上方显示当前进度值。

50% 
<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <UProgress v-model="value" status />
</template>

不确定状态

当未设置 v-model 或值为空（null）时，进度条将变为不确定状态。进度条将以 carousel 动画显示，但您可以通过animation属性进行更改。

<script setup lang="ts">
const value = ref(null)
</script>

<template>
  <UProgress v-model="value" />
</template>

动画

使用 animation 属性将进度条的动画更改为反向轮播、摆动条或弹性条。默认为 carousel。

<template>
  <UProgress animation="swing" />
</template>

方向

使用 orientation 属性更改进度条的方向。默认为 horizontal。

<template>
  <UProgress orientation="vertical" class="h-48" />
</template>

颜色

使用 color 属性更改滑块（Slider）的颜色。

<template>
  <UProgress color="neutral" />
</template>

尺寸

使用 size 属性更改滑块（Slider）的尺寸。

<template>
  <UProgress size="xl" />
</template>

反转

使用 inverted 属性在视觉上反转进度条。

<template>
  <UProgress inverted v-model="value" />
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

max

number | any[]

最大进度值。

status

boolean

显示当前进度值。

inverted

false

boolean

进度条在视觉上是否反转。

size

'md'

"2xs" | "sm" | "md" | "xs" | "lg" | "xl" | "2xl"

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

orientation

'horizontal'

"horizontal" | "vertical"

进度条的方向。

animation

'carousel'

"carousel" | "carousel-inverse" | "swing" | "elastic"

进度条的动画。

modelValue

null

null | number

进度值。可绑定为 v-model。

getValueLabel

(value: number, max: number): string

一个函数，用于获取代表当前值的可访问标签文本，格式为人类可读。

如果未提供，值标签将按数值（占最大值的百分比）读取。

ui

{ root?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; status?: ClassNameValue; steps?: ClassNameValue; step?: ClassNameValue; }

插槽

插槽类型
status

{ percent?: number | undefined; }

触发事件

事件类型
update:modelValue

[value: string[] | undefined]

update:max

[value: number]

主题

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',
        status: 'flex justify-end text-dimmed transition-[width] duration-200',
        steps: 'grid items-end',
        step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
      },
      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-inverted'
          }
        },
        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'
          },
          vertical: {
            root: 'h-full flex flex-row-reverse',
            base: 'h-full',
            status: 'flex-col'
          }
        },
        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: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'carousel-inverse',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel-inverse',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'swing',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'swing',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'elastic',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'elastic',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_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',
            status: 'flex justify-end text-dimmed transition-[width] duration-200',
            steps: 'grid items-end',
            step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
          },
          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-inverted'
              }
            },
            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'
              },
              vertical: {
                root: 'h-full flex flex-row-reverse',
                base: 'h-full',
                status: 'flex-col'
              }
            },
            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: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'carousel-inverse',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel-inverse',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'swing',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'swing',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'elastic',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'elastic',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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',
            status: 'flex justify-end text-dimmed transition-[width] duration-200',
            steps: 'grid items-end',
            step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
          },
          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-inverted'
              }
            },
            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'
              },
              vertical: {
                root: 'h-full flex flex-row-reverse',
                base: 'h-full',
                status: 'flex-col'
              }
            },
            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: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'carousel-inverse',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel-inverse',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'swing',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'swing',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'elastic',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'elastic',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
              }
            }
          ],
          defaultVariants: {
            animation: 'carousel',
            color: 'primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

Popover

围绕触发元素浮动的非模态对话框。

RadioGroup

一组单选按钮，用于从列表中选择单个选项。