컴포넌트
Segmented Control
iOS 스타일 세그먼트 컨트롤. 선택된 세그먼트 뒤로 그라데이션 알약 배경이 부드럽게 슬라이드하며, 제어/비제어 모드와 키보드(←/→/Home/End) 내비게이션을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SegmentedControl-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| options | SegmentOption[] | [일간, 주간, 월간] | 세그먼트 목록 (value/label). 미지정 시 기본 3개 항목 사용. |
| value | string | undefined | 제어 컴포넌트로 쓸 때의 현재 선택 값. |
| defaultValue | string | 첫 항목 value | 비제어 컴포넌트의 초기 선택 값. |
| onChange | (value: string) => void | undefined | 선택이 바뀔 때 호출되는 콜백. |
| ariaLabel | string | "보기 선택" | tablist 그룹의 접근성 라벨. |