Progress

작업 완료도를 정확히 보여 주고 진행량 미정 상태도 함께 나타냅니다.

용법

확정된 진행량

명시한 최댓값을 기준으로 확인된 완료량을 보여 줍니다.

64progressing

<!-- Progress / Determinate -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>

<template>
  <ProgressRoot value="64" label="Upload progress" v-slot="{ status }">
    <ProgressTrack><ProgressIndicator /></ProgressTrack>
    <ProgressValueText />
    <span aria-hidden="true">{{ status }}</span>
  </ProgressRoot>
</template>

진행량 미정

완료량이 미정인 작업 상태를 나타냅니다.

indeterminate

<!-- Progress / Indeterminate -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>

<template>
  <ProgressRoot  label="Upload progress" v-slot="{ status }">
    <ProgressTrack><ProgressIndicator /></ProgressTrack>
    <ProgressValueText />
    <span aria-hidden="true">{{ status }}</span>
  </ProgressRoot>
</template>

완료

현재 값이 최댓값에 도달한 완료 상태를 보여 줍니다.

100complete

<!-- Progress / Complete -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>

<template>
  <ProgressRoot value="100" label="Upload progress" v-slot="{ status }">
    <ProgressTrack><ProgressIndicator /></ProgressTrack>
    <ProgressValueText />
    <span aria-hidden="true">{{ status }}</span>
  </ProgressRoot>
</template>

정확한 소수

입력한 십진수 0.1을 정확한 값으로 유지합니다.

0.1progressing

<!-- Progress / Exact Decimal -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>

<template>
  <ProgressRoot value="0.1" max="0.3" label="Upload progress" v-slot="{ status }">
    <ProgressTrack><ProgressIndicator /></ProgressTrack>
    <ProgressValueText />
    <span aria-hidden="true">{{ status }}</span>
  </ProgressRoot>
</template>

API

Vue 패키지: @sectile/vue/progress

컴포넌트

ProgressRoot
ProgressTrack
ProgressIndicator
ProgressValueText

Props

`ProgressRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
formatValue: 타입ProgressValueFormatter기본값undefined
값을 화면에 표시할 문자열로 바꾸는 함수입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
max: 타입number | string기본값100
컴포넌트가 받을 수 있는 최댓값입니다.
value: 타입number | string | null기본값null
이 계약이 노출하는 현재 값입니다.

`ProgressPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`ProgressRootSlotProps`

max: 타입string
숫자 범위의 최댓값입니다.
percentage: 타입number | null
현재 값을 범위의 백분율로 나타낸 값입니다.
status: 타입'indeterminate' | 'progressing' | 'complete'
현재 생명주기 상태입니다.
value: 타입string | null
이 계약이 노출하는 현재 값입니다.
valueText: 타입string | null
현재 범위 값을 사용할 수 있을 때 형식화한 문자열입니다.

기타 타입

`ProgressValueFormatter`

type ProgressValueFormatter = (value: string) => string

파트

공통 범위: [data-scope="progress"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	확정된 완료량과 진행량 미정 상태를 노출합니다.	`role="progressbar"` `data-status="<status>"` `data-percentage="<percentage>"`
`track`	`[data-part="track"]`	작업 완료도의 시각적 경로를 제공합니다.	—
`indicator`	`[data-part="indicator"]`	기존 접근성 의미를 유지하며 알려진 정확한 백분율만큼 채웁니다.	`aria-hidden="true"` `data-status="<status>"` `data-percentage="<percentage>"`
`value-text`	`[data-part="value-text"]`	서식화된 값을 텍스트로 표시합니다.	—

키보드 동작

키	동작
`None`	범위 표시는 읽기 전용 의미와 값만 제공합니다.

접근성

이름이 있는 진행 표시줄은 0과 최댓값을 노출하고 진행량 미정 상태에서는 현재 값과 값 텍스트를 생략합니다.

Progress ​

용법 ​

확정된 진행량 ​

진행량 미정 ​

완료 ​

정확한 소수 ​

API ​

Props ​

ProgressRootProps ​

ProgressPartProps ​

슬롯 ​

ProgressRootSlotProps ​

기타 타입 ​

ProgressValueFormatter ​

파트 ​

키보드 동작 ​

접근성 ​