SSpinner <s-spinner>

콘텐츠나 작업이 로딩 중임을 나타내는 애니메이션 표시기입니다. SSpinner은(는) Shopify Polaris <s-spinner> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 느린 비동기 작업에 표시하세요. 폼 저장, 데이터 가져오기, 액션 처리처럼 약 500ms보다 오래 걸리는 작업에 spinner를 사용합니다. 즉시 끝나는 액션에서는 spinner가 깜빡이기만 하고 주의를 흐트러뜨립니다.
• 로딩 중인 부분에만 국한하세요. 인터페이스 전체를 막지 말고, 저장 중인 버튼이나 데이터를 가져오는 섹션처럼 페이지에서 로딩 중인 부분에 spinner를 둡니다.
• 무엇을 로딩 중인지 밝히세요. 항상 "Loading products"나 "Saving changes"처럼 accessibilityLabel을 설정해 스크린 리더 사용자가 무슨 일이 일어나는지 알 수 있게 합니다.
• 끝난 뒤에는 결과를 알려 주세요. spinner가 사라지면 명확한 성공 또는 오류 메시지를 보여 줘 판매자가 작업이 끝났는지, 어떻게 되었는지 알 수 있게 합니다.

<SSpinner accessibilityLabel="Loading products" />

전체 가이드는 <s-spinner>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

<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	타입	설명
accessibilityLabel	string	스크린 리더 같은 보조 기술을 위해 컴포넌트의 목적이나 내용을 설명하는 레이블입니다. 보이는 콘텐츠만으로는 컴포넌트의 목적이 명확하게 전달되지 않을 때 추가 맥락을 제공하는 데 사용합니다.
size	"base" | "large" | "large-100"	로딩 스피너의 크기입니다. - base: 인라인 로딩 표시나 일반 UI 컨텍스트에 적합한 기본 크기입니다. - large: 더 눈에 띄는 로딩 상태를 위한 큰 스피너입니다. - large-100: 전체 페이지 또는 강조된 로딩 상태를 위한 아주 큰 스피너입니다.