Progress Circle
Progress Circle
Progress Circle은 작업의 진행 상태를 원형(circular) 형태로 표시할 때 사용해요. 링(ring) 모양으로 진행도를 시각적으로 보여줘요.
출처: 문서
본문
사용법 (Usage)
import { ProgressCircle } from "@chakra-ui/react"
<ProgressCircle.Root>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<ProgressCircle.ValueText />
</ProgressCircle.Root>
예시 (Examples)
라운드 (Rounded)
ProgressCircle.Range의 strokeLinecap prop을 사용해 프로그레스 서클 끝부분을 둥글게 만들 수 있어요.
크기 (Sizes)
size prop을 사용해 프로그레스 서클 컴포넌트의 크기를 바꿀 수 있어요.
색상 (Colors)
colorPalette prop을 사용해 컴포넌트의 색상 스킴을 바꿀 수 있어요.
값 텍스트 (Value Text)
ProgressCircle.ValueText 컴포넌트를 렌더링해 진행 값을 표시할 수 있어요.
커스텀 두께 (Custom Thickness)
ProgressCircleRing 컴포넌트에 --thickness CSS 변수를 전달해 링의 두께를 바꿀 수 있어요.
무한 진행 (Indeterminate)
value prop을 null로 설정하면 무한(indeterminate) 상태를 렌더링해요.
색상 (Color)
ProgressCircle.Range 컴포넌트에 stroke prop을 전달해 범위의 색상을 바꿀 수 있어요.
클로즈드 컴포넌트 (Closed Component)
ProgressCircle 컴포넌트로 클로즈드(closed) 컴포넌트를 만드는 방법을 보여줘요.
가이드 (Guide)
무한 진행 색상 커스터마이징 (Customizing indeterminate color)
_indeterminate 조건을 사용해 무한 진행 상태를 스타일링할 수 있어요.
<ProgressCircle.Range _indeterminate={{ stroke: "purple.500" }} />
Props
ProgressCircle의 Root 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.