컴포넌트
Rail Nav
활성 항목의 위치를 측정해 라인 인디케이터가 부드럽게 이동하는 세로 사이드바 네비게이션 컴포넌트입니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RailNav-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | RailNavItem[] | 5개 기본 항목 | 표시할 네비게이션 항목 목록(id/label/icon). 미지정 시 데모용 기본 항목 사용. |
| defaultIndex | number | 0 | 초기 활성 항목 인덱스. 유효 범위로 자동 클램프됨. |
| lineWidth | number | 3 | 활성 라인 인디케이터의 두께(px). |
| accentFrom | string | #C084FC | 인디케이터/강조 그라데이션 시작 색상. |
| accentTo | string | #EC4899 | 인디케이터/강조 그라데이션 끝 색상. |
| onChange | (index: number, item: RailNavItem) => void | undefined | 활성 항목이 바뀔 때 인덱스와 항목을 전달하는 콜백. |