SProgress `<s-progress>`

작업이 최댓값을 향해 얼마나 진행되었는지 보여 주는 진행률 표시줄입니다. SProgress은(는) Shopify Polaris <s-progress> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

측정할 수 있는 작업에 사용하세요. 작업을 전체 중 일부로 표현할 수 있을 때 progress bar를 사용합니다. 얼마나 걸릴지, 얼마나 진행되었는지 알 수 없다면 spinner가 더 가벼운 선택입니다.
무엇이 진행 중인지 밝히세요. accessibilityLabel에 "Importing products"나 "Storage used"처럼 정확한 설명을 지정합니다. 스크린 리더는 이 레이블로 progress bar를 읽어 주며, 생략하면 기본값이 없습니다.
숫자가 중요하면 텍스트를 추가하세요. progress bar 자체에는 레이블이나 백분율이 표시되지 않으므로, 판매자에게 수치가 필요하다면 옆에 텍스트를 두고 그 텍스트를 value와 맞춰 갱신합니다.
max를 실제 총량으로 설정하세요. 모든 것을 백분율로 바꾸지 말고 파일 개수나 할당량 크기처럼 실제 개수나 상한을 사용합니다. 그러면 작업이 끝날 때마다 value를 간단히 갱신할 수 있습니다.
tone은 문제를 알릴 때만 사용하세요. tone="critical"과 tone="warning"은 한도를 모두 사용한 경우처럼 문제를 나타내는 진행 상황에만 사용합니다. 일반적인 진행 중 작업은 기본 tone으로 둡니다.

vue

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

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

예시

Upload next file (40%)

vue

<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`가 없으면 진행 상태가 불확정 상태가 되며, 작업이 진행 중이지만 얼마나 걸릴지는 표시되지 않습니다.

SProgress <s-progress> ​

모범 사례 ​

예시 ​

Props ​

SProgress `<s-progress>`

모범 사례

예시

Props