컴포넌트
Steps Progress
가로 스텝 진행 표시. 완료(체크)·현재(pulse)·대기 세 상태를 구분하고, 연결선을 scaleX로 좌→우로 채우는 애니메이션을 주며, role=progressbar로 진행률을 노출합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StepsProgress-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| total | number | 4 | 전체 스텝 개수. |
| current | number | 2 | 현재 진행 스텝(1-based). 이전은 완료, 해당은 현재, 이후는 대기로 표시됩니다. |
| labels | string[] | undefined | 각 스텝의 라벨. 미지정 시 스텝 번호로 대체됩니다. |
| accentColor | string | #C084FC | 완료/현재 스텝 강조 색상. |
| className | string | undefined | 루트 요소에 적용할 추가 CSS 클래스. |