SProgress <s-progress>

Ein Fortschrittsbalken, der zeigt, wie weit eine Aufgabe in Richtung ihres Maximalwerts fortgeschritten ist. SProgress ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-progress>.

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

Best Practices

• Für messbare Arbeit verwenden. Ein Fortschrittsbalken passt, wenn sich die Arbeit als Teil eines Ganzen ausdrücken lässt. Ist nicht absehbar, wie lange etwas dauert oder wie weit es ist, ist ein Spinner die leichtere Wahl.
• Benennen, was fortschreitet. Geben Sie accessibilityLabel eine präzise Beschreibung, zum Beispiel „Importing products“ oder „Storage used“. Screenreader lesen den Balken unter diesem Label vor, und ohne Angabe gibt es keinen Standardwert.
• Text ergänzen, wenn die Zahlen zählen. Der Balken zeigt selbst kein Label und keinen Prozentwert. Setzen Sie daher Text daneben, wenn Händler die Zahlen brauchen, und halten Sie diesen Text mit value synchron.
• max auf die tatsächliche Gesamtmenge setzen. Verwenden Sie die echte Anzahl oder Obergrenze, etwa die Zahl der Dateien oder die Größe eines Kontingents, statt alles in Prozent umzurechnen. So lässt sich value einfach aktualisieren, während die Arbeit fortschreitet.
• Tone nur für Probleme verwenden. Reservieren Sie tone="critical" und tone="warning" für Fortschritt, der auf ein Problem hinweist, etwa ein ausgeschöpftes Limit. Normale laufende Arbeit bleibt beim Standard-Tone.

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

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-progress> (auf Englisch).

Beispiel

Upload next file (40%)

<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	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt der Komponente für assistive Technologien wie Screenreader beschreibt. Damit lässt sich zusätzlicher Kontext bereitstellen, wenn der sichtbare Inhalt allein nicht klar vermittelt, was gerade fortschreitet.
max	number	Wie viel Arbeit die Aufgabe insgesamt erfordert. Muss größer als 0 sein.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Die semantische Bedeutung und farbliche Gestaltung der Komponente. - auto: Wird automatisch anhand des Kontexts bestimmt. - neutral: Allgemeine Informationen ohne bestimmte Absicht. - info: Informative Inhalte oder hilfreiche Tipps. - success: Positive Ergebnisse oder erfolgreiche Zustände. - caution: Hinweise, die Aufmerksamkeit erfordern. - warning: Wichtige Warnungen vor möglichen Problemen. - critical: Dringende Probleme oder destruktive Aktionen.
value	number	Wie viel der Aufgabe erledigt ist, als Zahl zwischen 0 und max. Ohne value ist der Fortschritt unbestimmt: Die Aufgabe läuft, ohne Angabe, wie lange sie voraussichtlich dauert.