컴포넌트
Unfold Nav
카드형 상단 네비게이션으로, 호버·포커스 시 해당 카드가 CSS grid-template 전환으로 확장되며 서브 항목을 노출한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/UnfoldNav-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | UnfoldNavItem[] | 3개 기본 카드 | 카드 목록(제목·태그라인·강조색·서브 항목). 미지정 시 데모용 기본 카드 제공. |
| expandedId | string | undefined | 제어 모드에서 현재 확장된 카드 id. 지정 시 외부 값이 우선한다. |
| onExpand | (id: string) => void | undefined | 확장 카드가 바뀔 때 확장된 카드 id와 함께 호출되는 콜백. |
| duration | number | 480 | 확장/축소 트랜지션 시간(ms). |
| expandRatio | number | 3.2 | 접힌 카드 대비 확장 카드의 grid fr 폭 배수. |
| glow | boolean | true | 커서 추적 글로우 사용 여부. reduced-motion 시 자동 비활성. |