ZSSegmentedExample
☀️
기본 · 2개 세그먼트
산책
간식
선택된 인덱스: 0
탭처럼 사용 · 콘텐츠 전환
홈
검색
알림
홈 화면
세그먼트 선택에 따라 콘텐츠가 전환됩니다.
4개 세그먼트 · 제어 모드
일간
주간
월간
연간
selectedIndex를 넘기면 외부 상태로 제어됩니다. (주간)
TEXTSIZE · 1 ~ 6
textSize="1"
왼쪽
오른쪽
textSize="3"
왼쪽
오른쪽
textSize="6"
왼쪽
오른쪽
긴 라벨 · 말줄임 처리
아주 길어서 잘리는 세그먼트 라벨
짧은 라벨
전체보기
예방접종 완료한 아이만 보기
입양가능
치료중
세그먼트 폭은 개수로 균등 분할되고, 폭을 넘는 라벨은 한 줄 말줄임(…) 처리됩니다.
FULLWIDTH={FALSE} · 콘텐츠 폭 맞춤
ON
OFF
ON
OFF
산책
간식
산책
간식
오늘
이번 주
최근 30일
오늘
이번 주
최근 30일
가장 긴 라벨과 글자 크기에 맞춰 전체 폭이 동적으로 결정됩니다.
커스텀 · 색상 / 높이 / 비활성
라이트
다크
시스템
수정
삭제
<ZSSegmented options={['일간', '주간', '월간', '연간']} initialIndex={0} onChange={(index) => setIndex(index)} containerHeight={40} textSize="2" />