SProgress <s-progress>

Một thanh tiến trình cho biết tác vụ đã tiến đến đâu so với giá trị tối đa. SProgress là Vue 3 wrapper có type cho web component <s-progress> của Shopify Polaris.

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

Best practices

• Dùng cho công việc đo lường được. Dùng thanh tiến trình khi bạn có thể biểu diễn công việc như một phần của tổng thể. Khi bạn không biết việc gì đó sẽ mất bao lâu hoặc đã đi được bao xa, spinner là lựa chọn nhẹ nhàng hơn.
• Gọi tên thứ đang tiến triển. Đặt cho accessibilityLabel một mô tả chính xác, ví dụ "Importing products" hoặc "Storage used". Trình đọc màn hình đọc thanh tiến trình theo nhãn đó, và sẽ không có giá trị mặc định nếu bạn bỏ trống.
• Thêm văn bản khi con số quan trọng. Bản thân thanh tiến trình không hiển thị nhãn hay phần trăm, nên hãy đặt văn bản bên cạnh khi người bán cần các con số, và giữ văn bản đó đồng bộ với value.
• Đặt max bằng tổng thực tế. Dùng số lượng hoặc giới hạn thực, chẳng hạn có bao nhiêu file hay hạn mức lớn bao nhiêu, thay vì quy tất cả về phần trăm. Như vậy value sẽ dễ cập nhật khi công việc hoàn thành.
• Chỉ dùng tone để báo hiệu vấn đề. Dành tone="critical" và tone="warning" cho tiến trình cho thấy có vấn đề, chẳng hạn một giới hạn đã bị dùng hết. Để công việc đang tiến hành bình thường ở tone mặc định.

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

Xem best practices của Shopify cho <s-progress> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
accessibilityLabel	string	Nhãn mô tả mục đích hoặc nội dung của component cho các công nghệ hỗ trợ như trình đọc màn hình. Dùng nhãn này để cung cấp thêm ngữ cảnh khi riêng nội dung hiển thị chưa thể hiện rõ điều gì đang tiến triển.
max	number	Tổng khối lượng công việc mà tác vụ cần. Phải lớn hơn 0.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Ý nghĩa ngữ nghĩa và cách xử lý màu sắc của component. - auto: Tự động xác định dựa trên ngữ cảnh. - neutral: Thông tin chung không có mục đích cụ thể. - info: Nội dung thông tin hoặc mẹo hữu ích. - success: Kết quả tích cực hoặc trạng thái thành công. - caution: Thông báo khuyến cáo cần chú ý. - warning: Cảnh báo quan trọng về vấn đề tiềm ẩn. - critical: Vấn đề khẩn cấp hoặc hành động phá hủy.
value	number	Mức độ hoàn thành của tác vụ, là một số từ 0 đến max. Khi không có value, tiến trình ở trạng thái không xác định: tác vụ đang diễn ra mà không có chỉ báo về thời gian dự kiến.