SProgress <s-progress>

Une barre de progression qui indique l'avancement d'une tâche vers sa valeur maximale. SProgress est le wrapper Vue 3 typé du web component <s-progress> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez-la pour un travail mesurable. Optez pour une barre de progression lorsque vous pouvez exprimer le travail comme une partie d'un tout. Lorsque vous ne savez pas combien de temps une tâche prendra ni où elle en est, un spinner est le choix le plus léger.
• Nommez ce qui progresse. Donnez à accessibilityLabel une description précise, par exemple "Importing products" ou "Storage used". Les lecteurs d'écran annoncent la barre sous ce libellé, et il n'existe aucune valeur par défaut si vous l'omettez.
• Ajoutez du texte lorsque les chiffres comptent. La barre n'affiche elle-même ni libellé ni pourcentage : placez un texte à côté lorsque les marchands ont besoin des chiffres, et gardez ce texte synchronisé avec value.
• Définissez max sur le total réel. Utilisez le nombre ou le plafond réel, comme le nombre de fichiers ou la taille d'un quota, plutôt que de tout convertir en pourcentage. Il est alors simple de mettre à jour value à mesure que le travail avance.
• N'utilisez le ton que pour signaler un problème. Réservez tone="critical" et tone="warning" aux progressions qui révèlent un problème, comme une limite atteinte. Laissez le travail en cours ordinaire sur le ton par défaut.

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

Consultez les bonnes pratiques de Shopify pour <s-progress> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du composant pour les technologies d'assistance comme les lecteurs d'écran. Utilisez-le pour apporter un contexte supplémentaire lorsque le contenu visible seul ne suffit pas à indiquer clairement ce qui progresse.
max	number	Quantité totale de travail requise par la tâche. Doit être supérieure à 0.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	La signification sémantique et le traitement des couleurs du composant. - auto : déterminé automatiquement selon le contexte. - neutral : information générale sans intention particulière. - info : contenu informatif ou conseils utiles. - success : résultats positifs ou états de réussite. - caution : avis nécessitant de l'attention. - warning : avertissements importants sur des problèmes potentiels. - critical : problèmes urgents ou actions destructrices.
value	number	Part de la tâche déjà accomplie, sous forme de nombre compris entre 0 et max. Sans value, la progression est indéterminée : la tâche est en cours sans indication de sa durée prévue.