컴포넌트
Step Track
다단계 진행 스텝퍼. 원+연결선 인디케이터의 채워짐 애니메이션, 다음/이전 버튼으로 활성 단계를 이동하며 지나간 단계는 완료 체크로 표시된다. 제어/비제어 겸용, 키보드(Enter/Space/방향키) 및 aria 지원.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StepTrack-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| steps | StepperStep[] | 온보딩 4단계 기본값 | 표시할 단계 목록. 각 단계는 label과 선택적 description을 가진다. |
| activeStep | number | undefined | 현재 활성 단계 인덱스(제어 모드). 지정 시 내부 상태 대신 이 값을 사용한다. |
| onStepChange | (step: number) => void | undefined | 활성 단계가 바뀔 때 호출되는 콜백. |
| colorStart | string | #C084FC | 채워짐 그라데이션 시작 색. |
| colorEnd | string | #EC4899 | 채워짐 그라데이션 끝 색. |
| surfaceColor | string | #16121F | 카드 표면 배경색. |
| borderColor | string | #2A2440 | 보더 및 미완료 요소 색. |
| showControls | boolean | true | 이전/다음 버튼 노출 여부. |