Progress 完成进度

用于完成进度场景的 MoriUI 组件。

导入

import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from 'moriui'

示例

概览

动态进度条展示。

<script setup lang="ts">
  import { onMounted, onUnmounted, ref } from 'vue'
  import { Progress, ProgressIndicator, ProgressTrack } from 'moriui'

  const value = ref(13)
  let timer: ReturnType<typeof setInterval> | null = null

  onMounted(() => {
    timer = setInterval(() => {
      value.value = value.value >= 90 ? 0 : value.value + 10
    }, 800)
  })

  onUnmounted(() => {
    if (timer)
      clearInterval(timer)
  })
</script>

<template>
  <Progress v-model="value" class="w-3/5">
    <ProgressTrack>
      <ProgressIndicator />
    </ProgressTrack>
  </Progress>
</template>

受控

受控 value 驱动进度。

0%100%

<script setup lang="ts">
  import { ref } from 'vue'
  import { Progress, ProgressIndicator, ProgressTrack } from 'moriui'

  const value = ref(50)
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <Progress v-model="value" class="w-full">
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
    <div class="flex items-center gap-3">
      <span class="text-sm">0%</span>
      <input
        v-model.number="value"
        type="range"
        min="0"
        max="100"
        step="1"
        class="w-full"
      >
      <span class="text-sm">100%</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from 'moriui'
</script>

<template>
  <Progress :model-value="56" class="w-full max-w-sm">
    <ProgressLabel>上传进度</ProgressLabel>
    <ProgressTrack>
      <ProgressIndicator />
    </ProgressTrack>
    <ProgressValue />
  </Progress>
</template>

RTL

从右到左的进度条。

تقدم الرفع

56%

<script setup lang="ts">
  import {
    DirectionProvider,
    Progress,
    ProgressIndicator,
    ProgressLabel,
    ProgressTrack,
    ProgressValue
  } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <Progress :model-value="56" class="w-full max-w-sm">
      <ProgressLabel>تقدم الرفع</ProgressLabel>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
      <ProgressValue />
    </Progress>
  </DirectionProvider>
</template>

使用说明

组合方式

Progress 由 Track、Indicator、Label 和 Value 组成，通过 value 控制进度百分比。

受控

使用 value prop 控制进度值，支持动态更新。

RTL

进度条方向在 RTL 页面中自动翻转。

变体

Progress 没有视觉变体；value 范围 0-100，indeterminate 使用动画效果。

可访问性

Progress 复用 Reka UI 的 progressbar 角色、aria-valuenow、aria-valuemin、aria-valuemax。Label 应描述正在进行的任务。

API 参考

属性	类型	默认值	说明
`Progress value`	`number \| null`	`0`	当前进度值（0-100）。
`Progress max`	`number`	`100`	最大值。
`ProgressTrack class`	`HTMLAttributes["class"]`	`undefined`	合并到轨道的调用方类。
`ProgressIndicator class`	`HTMLAttributes["class"]`	`undefined`	合并到指示器的调用方类。
`ProgressLabel class`	`HTMLAttributes["class"]`	`undefined`	合并到标签文字的调用方类。
`ProgressValue class`	`HTMLAttributes["class"]`	`undefined`	合并到百分比值的调用方类。