SProgress `<s-progress>`

タスクが最大値に対してどこまで進んだかを示すプログレスバー。 SProgress は、Shopify Polaris の <s-progress> web component 向けの型付き Vue 3 wrapper です。

import { SProgress } from 'polaris-vue-elements'

ベストプラクティス

測定できる処理に使う。 処理を全体の一部として表せる場合はプログレスバーを使います。完了までの時間や進捗状況がわからない場合は、スピナーのほうが軽い選択肢です。
何が進行中なのかを示す。 accessibilityLabel には、「Importing products」や「Storage used」のような正確な説明を設定します。スクリーンリーダーはこのラベルでバーを読み上げ、省略した場合のデフォルトはありません。
数値が重要なときはテキストを添える。 バー自体にはラベルもパーセンテージも表示されないため、マーチャントが数値を必要とする場合は横にテキストを置き、そのテキストを value と同期させます。
max には実際の合計を設定する。 すべてをパーセンテージに変換するのではなく、ファイルの数やクォータの大きさなど、実際の件数や上限を使います。そうすれば、処理が進むにつれて value を簡単に更新できます。
トーンは問題を示すときだけ使う。 tone="critical" と tone="warning" は、上限に達したなど、問題を示す進捗のためにとっておきます。通常の進行中の処理はデフォルトのトーンのままにします。

vue

<SProgress accessibilityLabel="Importing products" :value="120" :max="300" />
<SText>120 of 300 products imported</SText>

詳しいガイダンスについては、<s-progress> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Upload next file (40%)

vue

<script setup>
import { ref } from 'vue'
import { SProgress, SButton } from 'polaris-vue-elements'

const uploaded = ref(40)

function advance() {
  uploaded.value = Math.min(uploaded.value + 20, 100)
}
</script>

<template>
  <!-- determinate: bind numeric props, don't write them as string attributes -->
  <SProgress accessibilityLabel="Import progress" :value="uploaded" :max="100" />

  <!-- toned -->
  <SProgress accessibilityLabel="Sync progress" tone="success" :value="80" :max="100" />

  <!-- indeterminate: omit `value` entirely -->
  <SProgress accessibilityLabel="Preparing export" />

  <SButton @click="advance">Upload next file ({{ uploaded }}%)</SButton>
</template>

Props

Prop	型	説明
`accessibilityLabel`	`string`	スクリーンリーダーなどの支援技術向けに、コンポーネントの目的や内容を説明するラベルです。表示されているコンテンツだけでは何が進行中なのかが明確に伝わらない場合に、追加のコンテキストを提供するために使用します。
`max`	`number`	タスクに必要な作業の総量です。`0` より大きくなければなりません。
`tone`	`"auto" \| "neutral" \| "info" \| "success" \| "caution" \| "warning" \| "critical"`	コンポーネントのセマンティックな意味と色の扱いです。 - `auto`: コンテキストに基づいて自動的に決定されます。 - `neutral`: 特定の意図を持たない一般的な情報。 - `info`: 情報提供のコンテンツや役立つヒント。 - `success`: 良い結果や成功した状態。 - `caution`: 注意が必要な勧告的な通知。 - `warning`: 潜在的な問題に関する重要な警告。 - `critical`: 緊急の問題や破壊的なアクション。
`value`	`number`	タスクがどれだけ完了したかを `0` から `max` までの数値で表します。`value` がない場合、進捗は不確定になります。つまり、タスクは進行中ですが、どれくらい時間がかかるかは示されません。

SProgress <s-progress> ​

ベストプラクティス ​

例 ​

Props ​

SProgress `<s-progress>`

ベストプラクティス

例

Props