进度条

显示指示器，用于显示任务的完成进度，通常以进度条的形式显示。

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ProgressIndicator, ProgressRoot } from 'radix-vue'

const progressValue = ref(10)

onMounted(() => {
  const timer = setTimeout(() => (progressValue.value = 66), 500)
  return () => clearTimeout(timer)
})
</script>

<template>
  <ProgressRoot
    v-model="progressValue"
    class="relative overflow-hidden bg-blackA9 rounded-full w-full sm:w-[300px] h-4 sm:h-5"
    style="transform: translateZ(0)"
  >
    <ProgressIndicator
      class="bg-white rounded-full w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
      :style="`transform: translateX(-${100 - progressValue}%)`"
    />
  </ProgressRoot>
</template>

功能

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

安装

从命令行安装组件。

$ npm add radix-vue

解剖

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

<script setup>
import { ProgressIndicator, ProgressRoot } from 'radix-vue'
</script>

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

无障碍性

符合 progressbar 角色要求.

API 参考

根

包含所有进度部分。

属性	默认值	类型
as	'div'	AsTag | 组件 此组件应渲染为的元素或组件。 可以被asChild覆盖
asChild		布尔值 将默认渲染的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的 组合 指南以了解更多信息。
getValueLabel	`${Math.round((value / max) * DEFAULT_MAX)}%`	((value: number, max: number) => string) 用于获取以人类可读格式表示当前值的辅助标签文本的函数。 如果未提供，则值标签将被读取为数字值，它是最大值的百分比。
max	DEFAULT_MAX	数字 最大进度值。
modelValue		数字 | 空值 进度值。 可以绑定为v-model。

发射	有效载荷
update:max	[value: number] 最大值更改时调用的事件处理程序
update:modelValue	[value: string[]] 进度值更改时调用的事件处理程序

插槽 (默认)	有效载荷
modelValue	数字 | 空值 | 未定义 当前输入值

方法	类型
getValueLabel	(value: number, max: number) => string 用于获取以人类可读格式表示当前值的辅助标签文本的函数。 如果未提供，则值标签将被读取为数字值，它是最大值的百分比。

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

指示器

用于以视觉方式显示进度。 它还使辅助技术能够访问进度。

属性	默认值	类型
as	'div'	AsTag | 组件 此组件应渲染为的元素或组件。 可以被asChild覆盖
asChild		布尔值 将默认渲染的元素更改为作为子元素传递的元素，合并它们的属性和行为。 阅读我们的 组合 指南以了解更多信息。

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