ZSTabExample
☀️
기본 · FILL 레이아웃
전체
진행중
완료
전체
전체 항목이 표시됩니다.
HUG 레이아웃 · 라벨 폭에 맞춤
산책
간식
돌봄
병원
선택된 값: walk
제어 모드 · VALUE 로 외부 제어
전체
진행중
완료
value 를 넘기면 선택 상태를 부모가 소유합니다. (ongoing)
INTENT · 인디케이터 색상
intent="primary"
전체
진행중
완료
intent="danger"
전체
진행중
완료
intent="success"
전체
진행중
완료
아이템 단위 DISABLED
대기
결제완료
취소
item.disabled 를 주면 해당 탭만 선택되지 않습니다.
SHOWDIVIDER={FALSE} · 구분선 없이
전체
진행중
완료
TEXTSIZE
textSize="1"
전체
진행중
완료
textSize="3"
전체
진행중
완료
textSize="5"
전체
진행중
완료
<ZSTab items={[ { value: 'all', label: '전체' }, { value: 'done', label: '완료' }, ]} value={tab} onChange={(value, index) => setTab(value)} layout="fill" intent="primary" />