컴포넌트 · 내비게이션

Tabs · SegmentedControl

Tabs는 같은 맥락의 콘텐츠 영역을 전환하고, SegmentedControl은 같은 데이터의 보기 방식(기간 · 단위)을 전환합니다. 두 컴포넌트 모두 인디케이터가 부드럽게 이동합니다.

무엇을 쓸까

컴포넌트전환 대상예시
Tabs · line페이지 내 주요 섹션주문 · 결제 · 정산 / 기본 정보 · 메뉴 · 직원
Tabs · pill카테고리 필터 (가로 스크롤)POS · 키오스크 메뉴 카테고리
SegmentedControl같은 데이터의 보기 방식 (2–4개)일 · 주 · 월 / 금액 · 건수

Line Tabs

신규 주문 12건이 접수 대기 중이에요.

Pill Tabs

SegmentedControl

사용 규칙

이렇게 하세요

  • 탭 라벨은 2–6자 명사
  • 탭 수가 많으면 가로 스크롤 (pill)
  • 선택 탭은 URL 쿼리에 반영 (?tab=settle)

이렇게 하지 마세요

  • 탭 전환으로 저장되지 않은 입력 날리기
  • SegmentedControl 5개 이상
  • 탭 안에 또 다른 line 탭 중첩

Props

PropTypeDefault설명
Tabs.items*{ value; label; count?; disabled? }[]—탭 목록 (count는 숫자 뱃지)
Tabs.variant"line" | "pill""line"스타일
Tabs.fittedboolean—균등 폭 (모바일)
Segmented.options*{ value; label }[]—2–4개 권장
Segmented.blockboolean—전체 폭