Lzh on GitHub

Progress

显示指示任务完成进度的指示器，通常显示为进度条。
<script setup lang="ts">
import { ProgressIndicator, ProgressRoot } from 'reka-ui'
import { onBeforeUnmount, onMounted, ref } from 'vue'

const progressValue = ref(10)
const timer = ref()

onMounted(() => {
  timer.value = setInterval(() => {
    if (progressValue.value === 100) {
      progressValue.value = 10
    }
    else {
      progressValue.value += 30
    }
  }, 2000)
})

onBeforeUnmount(() => {
  clearTimeout(timer.value)
})
</script>

<template>
  <ProgressRoot
    v-model="progressValue"
    class="rounded-full relative h-4 w-[300px] overflow-hidden bg-white dark:bg-stone-950 border border-muted"
  >
    <ProgressIndicator
      class="indicator rounded-full block relative w-full h-full bg-green-600 transition-transform overflow-hidden duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)] after:animate-progress after:content-[''] after:absolute after:inset-0  after:bg-[linear-gradient(-45deg,_rgba(255,255,255,0.2)_25%,_transparent_25%,_transparent_50%,_rgba(255,255,255,0.2)_50%,_rgba(255,255,255,0.2)_75%,_transparent_75%,_transparent)] after:bg-[length:30px_30px]"
      :style="`transform: translateX(-${100 - progressValue}%)`"
    />
  </ProgressRoot>
</template>

功能特点

  • 为辅助技术提供上下文，以读取任务的进度。

安装

从命令行安装组件。

$ npm add reka-ui

结构

导入所有部分并将其组合在一起。

<script setup>
  import { ProgressIndicator, ProgressRoot } from 'reka-ui'
</script>

<template>
  <ProgressRoot>
    <ProgressIndicator />
  </ProgressRoot>
</template>

可访问性

遵循 progressbar 角色要求。

API 参考

Root

包含所有进度部分。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。
getValueLabelisNumber(value) ? ${Math.round((value / max) * DEFAULT_MAX)}% : undefined((value: number | null, max: number) => string)用于获取可访问标签文本的人类可读格式的函数。如果未提供，则将值标签读取为最大值的百分比数字值。
getValueText((value: number | null, max: number) => string)用于获取表示当前值的人类可读格式的可访问值文本的函数。
maxDEFAULT_MAXnumber最大进度值。
modelValuenumber | null进度值。可以绑定为 v-model。

触发事件 (Emit)

事件名称Payload描述
update:max[value: number]最大值更改时调用的事件处理程序。
update:modelValue[value: string[]]进度值更改时调用的事件处理程序。

默认插槽

插槽参数插槽参数类型描述
modelValuenumber | null | undefined当前输入值

方法

方法名称类型描述
getValueLabel(value: number | null | undefined, max: number) => string | undefined用于获取可访问标签文本的人类可读格式的函数。如果未提供，则将值标签读取为最大值的百分比数字值。

数据属性

属性值
[data-state]"complete" | "indeterminate" | "loading"
[data-value]当前值
[data-max]最大值

Indicator

用于视觉上显示进度。它还使进度可供辅助技术访问。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可以通过 asChild 覆盖。
asChildfalseboolean将默认渲染的元素更改为作为子元素传递的元素，合并它们的 props 和行为。有关详细信息，请阅读我们的组合指南。

数据属性

属性值
[data-state]"complete" | "indeterminate" | "loading"
[data-value]当前值
[data-max]最大值