进度条 Progress

#基础用法

Copying the archive42%

progress/basic.vue

<script setup lang="ts">
import { Progress } from "@bysages/vue";
</script>

<template>
  <Progress.Root :default-value="42">
    <Progress.Label>Copying the archive</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

#属性

#CircleRange

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#CircleTrack

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Circle

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Range

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	进度槽的厚度档位
`defaultValue`	`number \| null`	`50`	进度条渲染时的初始值；不需要控制进度条值时使用
`formatOptions`	`Intl.NumberFormatOptions`	`{ style: "percent" }`	格式化值的选项
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; track: string; label: string; circle: string; }>`		进度条各元素的 id，适合组合使用
`locale`	`string`	`"en-US"`	格式化值使用的区域设置
`max`	`number`	`100`	进度条允许的最大值
`min`	`number`	`0`	进度条允许的最小值
`modelValue`	`number \| null`		进度条的 `v-model` 值
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	进度条的方向
`translations`	`progress.IntlTranslations`		本地化消息

#Track

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ValueText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#View

属性	类型	默认值	描述
`state`	`ProgressState`		—