プログレスバー

タスクの完了状況を示すインジケーターを表示します。通常はプログレスバーとして表示されます。

<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 | Component このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。
asChild		boolean 子として渡された要素のデフォルトのレンダリング要素を変更し、そのプロパティと動作をマージします。 詳細については、コンポジションガイドを参照してください。
getValueLabel	`${Math.round((value / max) * DEFAULT_MAX)}%`	((value: number, max: number) => string) 現在の値を人間が読み取れる形式で表すアクセシビリティラベルテキストを取得するための関数。 指定しない場合、値ラベルは数値として最大値のパーセンテージで読み取られます。
max	DEFAULT_MAX	number 最大進捗値。
modelValue		number | null 進捗値。v-modelとしてバインドできます。

イベント	ペイロード
update:max	[value: number] 最大値が変更されたときに呼び出されるイベントハンドラー
update:modelValue	[value: string[]] 進捗値が変更されたときに呼び出されるイベントハンドラー

スロット (デフォルト)	ペイロード
modelValue	number | null | undefined 現在の入力値

メソッド	型
getValueLabel	(value: number, max: number) => string 現在の値を人間が読み取れる形式で表すアクセシビリティラベルテキストを取得するための関数。 指定しない場合、値ラベルは数値として最大値のパーセンテージで読み取られます。

データ属性	値
[data-state]	"complete" | "indeterminate" | "loading"
[data-value]	現在の値
[data-max]	最大値

インジケーター

視覚的に進捗状況を表示するために使用されます。また、補助技術による進捗状況へのアクセスも可能にします。

プロパティ	デフォルト値	型
as	'div'	AsTag | Component このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。
asChild		boolean 子として渡された要素のデフォルトのレンダリング要素を変更し、そのプロパティと動作をマージします。 詳細については、コンポジションガイドを参照してください。

データ属性	値
[data-state]	"complete" | "indeterminate" | "loading"
[data-value]	現在の値
[data-max]	最大値