세그먼트 컨트롤

닫힌 집합의 보기 모드를 전환하는 컨트롤이다. Muse에서는 같은 콘텐츠를 List·Gallery·Index처럼 다른 편집 방식으로 보여줄 때 쓴다. 활성 표시는 잉크 밑줄이 슬라이딩하며 현재 위치를 보여준다.

활용 방법

items 로 라벨을 주고 onChange 로 선택 인덱스를 받는다.

Preview

tsx

<SegmentControl
  items={["List", "Gallery", "Index"]}
  defaultIndex={1}
  onChange={(i) => setView(i)}
/>

animateOnMount를 주면 마운트 시 밑줄이 0에서 선택값으로 슬라이드한다.

Preview

tsx

<SegmentControl items={["Stories", "Authors", "Archive"]} defaultIndex={2} animateOnMount />