Loongship UI

Appearance

Progress 进度条 ​

展示确定或不确定的任务进度。标题、百分比和状态说明由业务层组合。

命令行安装 ​

bash
npx @loongship-kit/ui add progress

基础用法 ​

航次数据同步64%
查看代码
vue
<script setup lang="ts">
import { Progress } from '@/components/loongship/progress'

const syncProgress = 64
</script>

<template>
  <div>
    <div>
      <span id="sync-progress-label">航次数据同步</span>
      <span>{{ syncProgress }}%</span>
    </div>
    <Progress :model-value="syncProgress" aria-labelledby="sync-progress-label" />
  </div>
</template>

自定义上限 ​

提供准确的业务含义

max 不必是百分制。可用 getValueText 为辅助技术提供比单纯百分比更准确的业务含义。

轨迹分片处理72 / 240
查看代码
vue
<script setup lang="ts">
import { Progress } from '@/components/loongship/progress'

const processedUnits = 72
const totalUnits = 240

function formatUnits(value: number | null | undefined, max: number) {
  return value == null ? undefined : `${value} / ${max} 个数据分片`
}
</script>

<template>
  <div>
    <div>
      <span id="units-progress-label">轨迹分片处理</span>
      <span>{{ processedUnits }} / {{ totalUnits }}</span>
    </div>
    <Progress
      :model-value="processedUnits"
      :max="totalUnits"
      :get-value-text="formatUnits"
      aria-labelledby="units-progress-label"
    />
  </div>
</template>

不确定状态 ​

不确定进度行为

值为 null 或未传入时，组件不设置 aria-valuenow，并显示不确定进度动画。减少动态效果的系统偏好下会保留静态指示块。

正在加载船舶数据
查看代码
vue
<script setup lang="ts">
import { Progress } from '@/components/loongship/progress'
</script>

<template>
  <div>
    <span id="loading-progress-label">正在加载船舶数据</span>
    <Progress :model-value="null" aria-labelledby="loading-progress-label" />
  </div>
</template>

API ​

属性 ​

属性类型默认值说明
modelValuenumber | null-当前进度；null 或未传入表示不确定状态
maxnumber100进度上限，必须大于 0
getValueLabel(value, max) => string | undefined百分比文案生成进度条的默认可访问名称
getValueText(value, max) => string | undefined-生成 aria-valuetext 业务文案
classClassValue-根节点自定义类名

值与无障碍约束

组件固定渲染 role="progressbar"，并支持 aria-label、aria-labelledby、aria-describedby、data-* 等标准属性。确定值必须位于 0..max；非法值由 Reka UI 校验并降级为不确定状态。

类型 ​

类型说明
ProgressPropsProgress 的公开 Props
ProgressValueFormatter可访问名称和业务进度文案的格式化函数

插槽 ​

无内容插槽。