SProgress <s-progress>

显示任务向最大值推进程度的进度条。 SProgress 是 Shopify Polaris <s-progress> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 用于可以衡量的工作。 当工作可以表示为整体的一部分时，使用进度条。当你无法判断某件事需要多长时间或进行到哪一步时，spinner 是更轻量的选择。
• 说明进度的对象。 为 accessibilityLabel 提供准确的描述，例如“正在导入产品”或“已用存储空间”。屏幕阅读器会用这个标签朗读进度条；如果省略，则没有默认值。
• 在数字重要时添加文字。 进度条本身不显示标签或百分比，因此当商家需要具体数字时，请在旁边添加文字，并让该文字与 value 保持同步。
• 将 max 设为真实的总量。 使用真实的数量或上限，例如文件总数或配额大小，而不是全部换算为百分比。这样随着工作完成，更新 value 会很简单。
• 只用色调提示问题。 将 tone="critical" 和 tone="warning" 留给提示问题的进度，例如额度已用尽。普通的进行中工作保持默认色调。

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

参阅 Shopify 关于 <s-progress> 的最佳实践（英文）以获取完整指南。

示例

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	类型	说明
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 时，进度为不确定状态：任务正在进行，但无法得知预计需要多长时间。