为 Vue 构建的界面语言。 v1.7.16 已发布
UI
开始设计规范组件变更记录
GitHub 仓库10

RingProgress 环形进度

以圆环的弧长表示任务完成的比例。

源码
72%
<script setup lang="ts">
  import { RingProgress } from '@hina-ui/vue'
</script>

<template>
  <RingProgress :value="72" show-value />
</template>
vue

用法

import { RingProgress } from '@hina-ui/vue'
ts

value 与 max 的含义与 Progress 相同，弧长按两者的比例从顶部起顺时针绘制。中心默认为空，showValue 在中心显示百分比。

40%
<script setup lang="ts">
  import { Inline, RingProgress } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg" align="center">
    <RingProgress :value="40" />
    <RingProgress :value="40" show-value />
  </Inline>
</template>
vue

示例

中心内容

默认插槽替换中心的内容，例如完成后显示一个图标，或者用 format 改写数值文字。

3/8
<script setup lang="ts">
  import { Check } from '@lucide/vue'
  import { Inline, RingProgress } from '@hina-ui/vue'

  const format = (value: number, max: number) => `${value}/${max}`
</script>

<template>
  <Inline gap="lg" align="center">
    <RingProgress :value="100" tone="success">
      <Check class="text-success size-6" />
    </RingProgress>
    <RingProgress :value="3" :max="8" show-value :format="format" />
  </Inline>
</template>
vue

标题

label 显示在圆环下方。

58%
已读
91%
已收藏
<script setup lang="ts">
  import { Inline, RingProgress } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="xl" align="start">
    <RingProgress :value="58" show-value label="已读" />
    <RingProgress :value="91" show-value label="已收藏" tone="info" />
  </Inline>
</template>
vue

数值变化

value 变化时弧长平滑过渡，增加与减少都是如此。

30%
<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, RingProgress, Stack } from '@hina-ui/vue'

  const value = ref(30)
  const step = (delta: number) => {
    value.value = Math.min(100, Math.max(0, value.value + delta))
  }
</script>

<template>
  <Stack gap="md" align="center">
    <RingProgress :value="value" show-value size="lg" />
    <Inline gap="sm">
      <Button size="sm" variant="soft" tone="neutral" :disabled="value === 0" @click="step(-10)">
        减 10
      </Button>
      <Button size="sm" variant="soft" tone="neutral" :disabled="value === 100" @click="step(10)">
        加 10
      </Button>
    </Inline>
  </Stack>
</template>
vue

尺寸

三档直径，md 是默认值。环的粗细与中心文字随直径一同变化。

60%
60%
60%
<script setup lang="ts">
  import { Inline, RingProgress } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg" align="center">
    <RingProgress :value="60" size="sm" show-value />
    <RingProgress :value="60" show-value />
    <RingProgress :value="60" size="lg" show-value />
  </Inline>
</template>
vue

色调

tone 决定弧的颜色，默认是强调色。

<script setup lang="ts">
  import { Inline, RingProgress } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg" align="center">
    <RingProgress :value="70" />
    <RingProgress :value="70" tone="neutral" />
    <RingProgress :value="100" tone="success" />
    <RingProgress :value="70" tone="warning" />
    <RingProgress :value="70" tone="danger" />
    <RingProgress :value="70" tone="info" />
  </Inline>
</template>
vue

未知进度

不传 value 时表示总量未知，四分之一长的弧绕圆环旋转。

正在连接
<script setup lang="ts">
  import { RingProgress } from '@hina-ui/vue'
</script>

<template>
  <RingProgress label="正在连接" />
</template>
vue

行为

  • 弧从顶部起顺时针绘制，两端为圆头；value 为 0 时不绘制。
  • value 变化时弧长平滑过渡，时长与曲线取自动效变量；越界的 value 按端点处理。
  • 未知进度的旋转与 Spinner 同一节奏；系统开启减弱动态效果时旋转停止，弧保持可见。

无障碍

  • 圆环带 role="progressbar"，aria-valuenow、aria-valuemin 与 aria-valuemax 随 value 与 max 给出；未知进度时不设 aria-valuenow。
  • 无障碍名优先取 label，没有 label 时取数值文字，未知进度时取界面语言中的“加载中”。
  • 传入 format 时其结果同时写入 aria-valuetext。
  • 图形本身对辅助技术隐藏，中心内容仍可被读取。

API

Props

属性
类型
默认值
说明
value
number | null
null
当前进度，不传表示未知进度
max
number
100
总量
label
string
—
圆环下方的标题
showValue
boolean
false
是否在中心显示数值文字
format
(value: number, max: number) => string
百分比
数值文字的格式
tone
'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'info'
'accent'
弧的颜色
size
'sm' | 'md' | 'lg'
'md'
直径
class
string
—
追加至根元素的类名

其余属性透传到带 role="progressbar" 的圆环元素上。

插槽

插槽
说明
default
中心内容，默认为 showValue 的数值