Progress

Progress

Progress는 작업의 진행 상태(progress status)를 표시할 때 사용해요. 트랙(Track) 안의 범위(Range)를 채워서 진행도를 시각적으로 보여줘요.

출처: 문서

본문

사용법 (Usage)

import { Progress } from "@chakra-ui/react"

<Progress.Root>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.Label />
  <Progress.ValueText />
</Progress.Root>

예시 (Examples)

크기 (Sizes)

size prop을 사용해 프로그레스 바의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용해 프로그레스 바의 시각적 스타일을 바꿀 수 있어요.

색상 (Colors)

colorPalette prop을 사용해 프로그레스 바의 색상을 바꿀 수 있어요.

인라인 레이블 (Inline Label)

Progress.Label과 Progress.ValueText 컴포넌트를 조합해 프로그레스 바의 인라인 레이블을 만들 수 있어요.

정보 툴팁 (Info tip)

info prop을 사용해 프로그레스 바에 툴팁을 추가할 수 있어요.

무한 진행 (Indeterminate)

값을 null로 설정하면 무한(indeterminate) 진행 상태의 프로그레스 바를 보여줘요.

스트라이프 (Stripes)

striped prop을 true로 설정하면 프로그레스 바에 스트라이프를 추가할 수 있어요.

애니메이션 스트라이프 (Animated Stripes)

animated prop을 true로 설정하면 스트라이프를 애니메이팅할 수 있어요.

클로즈드 컴포넌트 (Closed Component)

Progress 컴포넌트로 클로즈드(closed) 컴포넌트를 만드는 방법을 보여줘요.

Props

Progress의 Root 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.

더 알아보기 (Learn more)