Pantoia Design
Components

SegmentedControl

사용 예시

보기 방식

같은 일정을 달력이나 타임라인으로 보여요. 고르는 즉시 아래 내용이 바뀌어요.

달력타임라인
10월 6일 월주간 회의디자인 리뷰
10월 7일 화
10월 8일 수배포 점검
tsx
<SegmentedControl value={view} onValueChange={setView} aria-label="보기 방식">  <SegmentedControlItem value="calendar">달력</SegmentedControlItem>  <SegmentedControlItem value="timeline">타임라인</SegmentedControlItem></SegmentedControl>{view === 'calendar' ? <Calendar /> : <Timeline />}

버튼과 한 줄

도구 막대에서는 옆에 둔 Button과 같은 크기를 골라요.

sm

주월

md

주월

lg

주월
tsx
{['sm', 'md', 'lg'].map(size => (  <div key={size} className="flex items-center gap-2">    <SegmentedControl size={size} defaultValue="week" aria-label="기간">      <SegmentedControlItem value="week">주</SegmentedControlItem>      <SegmentedControlItem value="month">월</SegmentedControlItem>    </SegmentedControl>    <Button color="neutral" emphasis="outline" size={size}>오늘</Button>    <Button color="brand" emphasis="solid" size={size}>      <Plus />      일정 추가    </Button>  </div>))}

Tabs와 구분

달력타임라인
개요구성원설정

아이콘

아이콘만 쓰면 항목마다 aria-label을 적어요. 아이콘 크기는 크기에 맞춰 정해져요.

달력목록
tsx
<SegmentedControl defaultValue="list" aria-label="보기 방식">  <SegmentedControlItem value="list" aria-label="목록"><List /></SegmentedControlItem>  <SegmentedControlItem value="board" aria-label="보드"><LayoutGrid /></SegmentedControlItem></SegmentedControl><SegmentedControl defaultValue="calendar" aria-label="보기 방식">  <SegmentedControlItem value="calendar"><CalendarDays />달력</SegmentedControlItem>  <SegmentedControlItem value="list"><List />목록</SegmentedControlItem></SegmentedControl>

폭 맞추기

모바일 헤더처럼 폭이 좁으면 fill로 부모 폭만큼 늘려요.

전체내 업무완료
tsx
<SegmentedControl fill defaultValue="all" aria-label="업무 범위">  <SegmentedControlItem value="all">전체</SegmentedControlItem>  <SegmentedControlItem value="mine">내 업무</SegmentedControlItem>  <SegmentedControlItem value="done">완료</SegmentedControlItem></SegmentedControl>

항목 개수

일주월
일3일주2주월년

비활성 항목

지금 쓸 수 없는 보기 방식은 disabled로 남겨 둬요.

목록보드간트
tsx
<SegmentedControl defaultValue="list" aria-label="보기 방식">  <SegmentedControlItem value="list">목록</SegmentedControlItem>  <SegmentedControlItem value="board">보드</SegmentedControlItem>  <SegmentedControlItem value="gantt" disabled>간트</SegmentedControlItem></SegmentedControl>

컨트롤

목록보드
값"list"
tsx
<SegmentedControl value={view} onValueChange={setView} aria-label="보기 방식">  <SegmentedControlItem value="list">목록</SegmentedControlItem>  <SegmentedControlItem value="board">보드</SegmentedControlItem></SegmentedControl>

명세

이름
이름값기본
SegmentedControl
valuestring-
호출하는 쪽에서 고른 값을 관리해요.
defaultValuestring-
처음에 고를 값이에요. 늘 하나가 골라져 있어야 해서 꼭 적어요.
onValueChange(value, eventDetails) => void-
다른 항목을 고르면 호출돼요.
sizesm, md, lgmd
높이는 sm h-8, md h-9, lg h-10이에요. 같은 크기의 Button, Input과 높이가 같아요.
fillbooleanfalse
부모 폭만큼 늘리고 항목이 폭을 똑같이 나눠요.
disabledbooleanfalse
모든 항목을 비활성으로 만들어요.
aria-labelstring-
무엇을 고르는지 적어요. 화면에 보이는 제목이 없을 때 꼭 적어요.
classNamestring-
SegmentedControlItem에도 쓸 수 있어요. 배경은 bg-neutral-selected, 둥글기는 r10, 안쪽 여백은 4px이고, 고른 항목은 bg-neutral-thumb와 shadow-s1, 둥글기는 r6이에요.
SegmentedControlItem
valuestring-
이 항목을 고르면 넘어가는 값이에요.
disabledbooleanfalse
childrenReactNode-
글자나 아이콘이에요. 아이콘만 쓰면 aria-label을 적어요.