컴포넌트
Animated Tabs
밑줄 인디케이터가 활성 탭으로 부드럽게 슬라이드하는 탭 컴포넌트. 각 탭 버튼의 위치와 폭을 측정해 transform으로 밑줄을 이동시키며, 화살표/Home/End 키보드 내비게이션과 WAI-ARIA Tabs 패턴, reduced-motion 대응을 갖췄다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/AnimatedTabs-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | TabItem[] | 4개 기본 탭(개요/특징/요금제/지원) | 표시할 탭 목록. 각 항목은 id, label, 선택적 content를 가진다. 미지정 시 합리적 기본값 사용. |
| defaultIndex | number | 0 | 초기 활성 탭 인덱스. 유효 범위로 클램프된다. |
| onChange | (index: number, item: TabItem) => void | undefined | 탭이 변경될 때 활성 인덱스와 해당 탭 데이터를 전달하는 콜백. |
| showContent | boolean | true | 활성 탭의 콘텐츠 패널 표시 여부. |
| className | string | undefined | 루트 요소에 추가할 커스텀 클래스명. |