컴포넌트FOX · Tab

탭

같은 화면 안에서 내용을 나눠 보여 주는 이름표예요. 한 번에 하나만 선택되고, 좌우 화살표 키로 옮길 수 있어요.

줄 탭

탭 아래에 먹색 줄이 깔리고, 선택한 탭에는 보라색 굵은 막대가 붙어요. 가장 기본이 되는 모양이에요.

LINE

전체 내역이에요.

<Tabs defaultValue="all">
  <TabList>
    <Tab value="all">전체</Tab>
    <Tab value="in">들어온 돈</Tab>
    <Tab value="out">나간 돈</Tab>
  </TabList>
  <TabPanel value="all">전체 내역이에요.</TabPanel>
  <TabPanel value="in">들어온 돈 내역이에요.</TabPanel>
  <TabPanel value="out">나간 돈 내역이에요.</TabPanel>
</Tabs>

칸 탭

탭이 두세 개이고 짧은 선택일 때 써요. 선택한 칸이 먹색으로 채워져요.

SEGMENTED

<Tabs variant="segmented" defaultValue="month">
  <TabList>
    <Tab value="week">주</Tab>
    <Tab value="month">월</Tab>
    <Tab value="year">년</Tab>
  </TabList>
</Tabs>

새 소식 점

새로 올라온 내용이 있는 탭에는 6px 네모 점을 붙여요. 숫자가 필요하면 배지를 써요.

NEW DOT

<Tab value="notice" newDot>공지</Tab>

키보드

탭에 포커스가 있을 때 아래 키로 옮겨요. 선택은 바로 따라와요.

KEYS

← → 이웃 탭으로, Home 첫 탭으로, End 마지막 탭으로 가요.

이렇게 써요

이렇게탭 이름은 두 글자에서 네 글자로 짧게 써요.

이렇게 말고탭 이름이 길면 한 줄에 다 안 들어가서 가려져요.

속성

속성	값	기본값	설명
`Tabs.value / defaultValue`	string	없음	선택된 탭. 제어와 비제어를 모두 지원한다
`Tabs.onValueChange`	(value: string) => void	없음	탭이 바뀔 때
`Tabs.variant`	"line" \| "segmented"	`line`	밑줄 탭 또는 칸 탭
`Tab.value`	string	없음	탭과 패널을 잇는 값. 필수
`Tab.newDot`	boolean	`false`	6px 새 소식 점
`Tab.disabled`	boolean	`false`	누를 수 없는 탭
`TabPanel.value`	string	없음	같은 값의 탭이 선택될 때만 보인다