Progress

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

끝날 작업의 진행률을 표시합니다. 총량을 모를 때는 value=null로 설정하세요. 실제 작업 상태에서 값을 끌어오세요. 완료 결과는 별도로 알리세요.

시간이 지났다고 진행률을 올리지 마세요. 실제 작업에서 업데이트하세요. 사용량 표시에는 Meter를 사용하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Label + Value + Track(Indicator)

키보드와 접근성

Progress는 상태 표시이며 Tab 순서에 없습니다. Label이 접근 가능한 이름을 제공합니다. min, max, value props는 aria-valuetext와 함께 단위를 전달합니다. 빈번한 값 변경마다 live region으로 알리지 마세요. 대신 완료 결과를 알리세요.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Progress } from '@surflane/ui'

<Progress.Root value={30} aria-valuetext='30 of 100 checks completed'>
  <Progress.Label>Deployment progress</Progress.Label>
  <Progress.Value>
    {(formatted, value) => (value === null ? 'Waiting' : formatted)}
  </Progress.Value>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰