컴포넌트
Glide Tabs
탭 네비게이션에서 활성 탭 뒤로 알약(pill) 인디케이터가 부드럽게 슬라이드합니다. 활성 탭 버튼의 offsetLeft/offsetWidth를 측정해 알약의 translateX와 width를 CSS 트랜지션으로 이동시키며, ResizeObserver로 리사이즈·폰트 로드 시 재측정합니다. 화살표(←/→/Home/End) 키보드 이동과 roving tabindex, reduced-motion 대응을 갖춘 독자 구현입니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GlideTabs-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | GlideTabsItem[] | DEFAULT_ITEMS (홈/갤러리/요금/문서) | 탭 목록({ id, label }). 미지정 시 데모용 기본 탭 제공. |
| activeId | string | undefined | undefined | 제어 모드 활성 탭 id. 지정 시 외부 상태로 제어. |
| defaultActiveId | string | undefined | 첫 탭 id | 비제어 모드 초기 활성 탭 id. |
| onChange | (id: string) => void | undefined | 탭 변경 시 선택된 탭 id를 전달하는 콜백. |
| fromColor | string | #C084FC | 알약 그라데이션 시작색. |
| toColor | string | #EC4899 | 알약 그라데이션 끝색. |
| duration | number | 380 | 알약 이동 트랜지션 시간(ms). |
| ariaLabel | string | 탭 네비게이션 | 탭 그룹(tablist) 접근성 라벨. |
| className | string | undefined | undefined | 루트 컨테이너 추가 클래스. |
| style | CSSProperties | undefined | undefined | 루트 컨테이너 인라인 스타일. |