기본

닫힌 집합(보통 2~5개)의 모드/뷰를 전환하는 컨트롤이다. 활성 표시가 슬라이딩해 지금 어디에 있는지 또렷이 보여준다. 페이지 내 섹션 이동이 아니라, 같은 영역의 표시 모드를 바꿀 때 쓴다. 기본은 처음 선택값에 밑줄이 이미 자리한 채 시작한다.

활용 방법

items 로 라벨을 주고 onChange 로 선택 인덱스를 받는다. 처음 선택값에 밑줄이 자리한 채로 시작한다.

Preview

tsx

<SegmentControl
  items={["자동화", "실행 기록", "내 연결", "계정 사용량"]}
  defaultIndex={2}
  onChange={(i) => setTab(i)}
/>

animateOnMount 를 주면 마운트 시 밑줄이 0 에서 선택값으로 슬라이드해 들어온다. 등장 효과가 필요할 때만 켠다(기본 false).

Preview

tsx

<SegmentControl
  items={["자동화", "실행 기록", "내 연결", "계정 사용량"]}
  defaultIndex={2}
  animateOnMount
/>

이름	타입	기본값	설명
items	string[]	-	탭 라벨 목록
defaultIndex	number	0	초기 활성 인덱스
onChange	(i: number) => void	-	선택 변경 콜백
animateOnMount	boolean	false	마운트 시 밑줄이 0 → 선택값으로 슬라이드(기본은 바로 자리한 채 시작)