SSpinner <s-spinner>

Một chỉ báo động cho biết nội dung hoặc một hành động đang tải. SSpinner là Vue 3 wrapper có type cho web component <s-spinner> của Shopify Polaris.

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

Best practices

• Hiển thị cho các tác vụ bất đồng bộ chậm. Dùng spinner khi những việc như lưu form, tải dữ liệu hoặc xử lý một hành động mất hơn khoảng 500ms. Với các hành động hoàn tất tức thì, spinner chỉ nhấp nháy và gây phân tâm.
• Giữ nó ở đúng chỗ đang tải. Đặt spinner trong phần của trang đang tải, chẳng hạn một nút đang lưu hoặc một section đang tải dữ liệu, thay vì chặn toàn bộ giao diện.
• Nói rõ cái gì đang tải. Luôn đặt accessibilityLabel, ví dụ "Loading products" hoặc "Saving changes", để người dùng trình đọc màn hình biết chuyện gì đang diễn ra.
• Báo kết quả sau đó. Khi spinner biến mất, hiển thị một thông báo thành công hoặc lỗi rõ ràng để người bán biết thao tác đã hoàn tất và kết quả ra sao.

<SSpinner accessibilityLabel="Loading products" />

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

Ví dụ

<script setup>
import { SSpinner } from 'polaris-vue-elements'
</script>

<template>
  <SSpinner accessibilityLabel="Loading, small" size="base" />
  <SSpinner accessibilityLabel="Loading, large" size="large" />
  <SSpinner accessibilityLabel="Loading, extra large" size="large-100" />
</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õ mục đích của component.
size	"base" | "large" | "large-100"	Kích thước của spinner tải. - base: Kích thước mặc định phù hợp cho chỉ báo tải inline hoặc ngữ cảnh UI tiêu chuẩn. - large: Spinner lớn hơn cho trạng thái tải nổi bật hơn. - large-100: Spinner cực lớn cho trạng thái tải toàn trang hoặc cần nhấn mạnh.