HudProgress 進捗

直線またはリング型の進捗で、処理の流れを見えるようにします。

基本的な使い方

インタラクティブプレビュー

72%同期済み

…スキャン中

データ同期72%

サンプルの進捗を調整

72

接続中処理中

Vue のソースを表示

Vue · TypeScript

<script setup lang="ts">
import { AgmHudProgress, AgmSlider } from 'augma'
import { shallowRef } from 'vue'

const value = shallowRef(72)
</script>

<template>
  <div class="example-stack">
    <div class="example-row">
      <AgmHudProgress label="同期済み" :value="value" variant="ring" />
      <AgmHudProgress label="スキャン中" variant="ring" />
    </div>
    <AgmHudProgress label="データ同期" :value="value" />
    <AgmSlider v-model="value" label="サンプルの進捗を調整" />
    <AgmHudProgress label="接続中" indeterminate-text="処理中" />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

プロパティ	型	デフォルト	説明
label	string	必須	進捗の名前
value	number	undefined	省略するか有限でない数値を渡すと、不確定の進捗になります
max	number	100	上限値。不正な値は 100 になります
variant	'bar' | 'ring'	'bar'	表示形式
indeterminateText	string	'进行中'	不確定の進捗のとき、バーに表示するテキスト

キーボード操作と利用上の注意

読み取り専用の進捗として progressbar のセマンティクスを使います。値は 0〜max に制限され、不確定の進捗では aria-valuenow を設定しません。

インストール

import { AgmHudProgress } from 'augma'
import 'augma/style.css'

編集可能なソースをコピー：

pnpm dlx [email protected] add https://augma.yyj.moe/r/hud-progress.json