Tabs

같은 자리에서 여러 패널 중 하나만 보여 줍니다. 내용을 나란히 두기보다 전환해서 볼 때 씁니다.

import { Tab, TabPanel, Tabs } from 'neba';

<Tabs defaultValue="overview">
  <Tab value="overview">개요</Tab>
  <Tab value="usage">사용량</Tab>

  <TabPanel value="overview">오늘 배포 세 번, 전부 성공.</TabPanel>
  <TabPanel value="usage">빌드 1,284분 사용.</TabPanel>
</Tabs>;

<TabList> 같은 wrapper는 없습니다. Tab과 TabPanel을 나란히 두면 컴포넌트가 알아서 탭 바와 패널 영역으로 나눕니다.

Props

Tabs

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'outline'	패널이 아니라 탭 **바**의 무게. solid는 분절 컨트롤(홈통 안의 타일), outline은 바 가장자리의 선, text는 그 선을 뺀 것
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	탭의 높이와 타입 스케일. Button과 같은 사다리라 툴바에 섞어 놓아도 기준선이 맞습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
value	string | number | null	—	선택된 탭. controlled
defaultValue	string | number | null	—	처음 선택된 탭
onValueChange	(value: string | number | null) => void	—	선택이 바뀔 때
orientation공통	'horizontal' | 'vertical'	'horizontal'	바가 흐르는 방향. vertical이면 탭이 옆으로 서고 화살표 키도 그 축으로 옮겨 갑니다
activateOnFocus	boolean	false	화살표로 지나가기만 해도 선택할지. 기본이 꺼짐인 이유는 패널 하나가 데이터를 받아 온다면 탭 넷을 지나가는 것이 요청 네 번이기 때문입니다
loopFocus	boolean	true	마지막 탭에서 화살표를 누르면 처음으로 돌아갈지
overflow	'scroll' | 'wrap'	'scroll'	자리보다 탭이 많을 때 할 일. scroll은 한 줄을 유지한 채 스크롤하며 남은 쪽 끝을 흐리고, wrap은 필요한 만큼 줄을 씁니다
lines	number	—	바가 가질 수 있는 최대 탭 줄 수. 그 위로는 스크롤합니다. overflow가 wrap일 때만 읽습니다
wheel	boolean	true	바 위에서 굴린 휠을 바를 따라가는 이동으로 바꾸고, 양 끝에서도 놓지 않습니다. 자리가 남는 바는 휠을 가져가지 않으며, 포인터가 바 밖으로 나가야 페이지가 휠을 되찾습니다
fullWidth	boolean	false	탭들이 바의 폭을 똑같이 나눠 갖습니다
children	ReactNode	—	Tab과 TabPanel. 둘은 알아서 나뉘어 각자의 자리에 놓이므로 감싸는 래퍼를 쓸 필요가 없습니다

Tab

Prop	타입	기본값	설명
value *	string | number	—	탭의 식별자. 같은 값을 가진 TabPanel을 가리킵니다
startIcon	ReactNode	—	라벨 앞의 내용
endIcon	ReactNode	—	라벨 뒤의 내용, 개수, Badge, 상태 점
disabled	boolean	false	사용 불가. 목록에는 남습니다
children	ReactNode	—	탭의 라벨

TabPanel

Prop	타입	기본값	설명
value *	string | number	—	어느 탭이 이 패널을 보여 줄지
keepMounted	boolean	false	숨겨진 동안에도 DOM에 남깁니다. 만들기 비싼 내용이나 살아 있어야 하는 폼 상태
children	ReactNode	—	패널의 내용

예시

variant

variant는 패널이 아니라 탭 바의 무게입니다.

• solid: 홈통 안에서 채워진 타일이 탭 사이를 움직입니다.
• outline: 바 가장자리의 선 위에 표시자가 올라갑니다.
• text: 선 없이 표시자만 남습니다. 이미 테두리가 있는 Card 안에 넣을 때 씁니다.

import { Tab, TabPanel, Tabs } from 'neba';

/**
 * `variant` here is the weight of the *bar*, not of the panels under it:
 * `solid` is a segmented control with a tile that slides between the tabs,
 * `outline` is the classic rule with the indicator riding on it, and `text` is
 * the same bar with the rule taken away — for tabs inside a Card that already
 * has an edge of its own.
 */
export default function TabsVariants() {
  return (
    <div className="flex w-full flex-col gap-6">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <Tabs key={variant} variant={variant} defaultValue="a" size="sm">
          <Tab value="a">Overview</Tab>
          <Tab value="b">Usage</Tab>
          <Tab value="c">Billing</Tab>
          <TabPanel value="a">variant="{variant}"</TabPanel>
          <TabPanel value="b">
            The indicator moves by animating its box, never by transforming it.
          </TabPanel>
          <TabPanel value="c">Nothing with text in it moves.</TabPanel>
        </Tabs>
      ))}
    </div>
  );
}

orientation

vertical은 탭 바를 왼쪽에 세로로 놓습니다. 방향키도 함께 세로축으로 바뀝니다.

import { Card, Tab, TabPanel, Tabs } from 'neba';

/**
 * A vertical bar is not just a rotated horizontal one: Base UI moves the arrow
 * keys onto the other axis with it, which is what makes it reachable at all.
 */
export default function TabsOrientation() {
  return (
    <div className="grid w-full grid-cols-1 gap-5 lg:grid-cols-2">
      <Tabs orientation="vertical" defaultValue="general" size="sm">
        <Tab value="general">General</Tab>
        <Tab value="members">Members</Tab>
        <Tab value="tokens">Tokens</Tab>
        <Tab value="webhooks">Webhooks</Tab>

        <TabPanel value="general">The project name, its slug and its default branch.</TabPanel>
        <TabPanel value="members">Nine people, three of them admins.</TabPanel>
        <TabPanel value="tokens">Two tokens, one expiring in eleven days.</TabPanel>
        <TabPanel value="webhooks">No webhooks yet.</TabPanel>
      </Tabs>

      <Card size="sm" title="Inside a card" subtitle="variant='text' and fullWidth">
        <Tabs variant="text" fullWidth defaultValue="a" size="sm">
          <Tab value="a">Daily</Tab>
          <Tab value="b">Weekly</Tab>
          <Tab value="c">Monthly</Tab>
          <TabPanel value="a">A card already has an edge, so the bar gives up its own.</TabPanel>
          <TabPanel value="b">The tabs share the width equally.</TabPanel>
          <TabPanel value="c">Nothing here draws a second rectangle.</TabPanel>
        </Tabs>
      </Card>
    </div>
  );
}

overflow와 lines

overflow는 자리보다 탭이 많을 때 바가 무엇을 할지 정합니다. 기본값 scroll은 한 줄을 유지한 채 그 위를 스크롤하고, 그 방향에 바가 더 남아 있는 동안 양 끝을 흐립니다. 스크롤바 자체는 감춥니다. wrap은 탭이 필요한 만큼 줄을 쓰고, 선택된 탭 아래의 선도 그 탭이 있는 줄로 따라갑니다.

lines는 wrap하는 바의 높이를 탭 줄 수로 제한하고, 그 위로는 스크롤합니다. overflow가 wrap일 때만 읽습니다.

import { Tab, TabPanel, Tabs, Typography } from 'neba';

const SECTIONS = [
  'Overview',
  'Activity',
  'Members',
  'Settings',
  'Billing',
  'Integrations',
  'Audit log',
  'Webhooks',
  'API keys'
];

function Bar(props: { overflow?: 'scroll' | 'wrap'; lines?: number }) {
  return (
    <Tabs defaultValue="Overview" {...props}>
      {SECTIONS.map((section) => (
        <Tab key={section} value={section}>
          {section}
        </Tab>
      ))}
      <TabPanel value="Overview">Nine sections in a box too narrow for them.</TabPanel>
    </Tabs>
  );
}

export default function TabsOverflow() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div>
        <Typography level="caption" color="secondary">
          overflow=&quot;scroll&quot; — the default
        </Typography>
        <Bar />
      </div>

      <div>
        <Typography level="caption" color="secondary">
          overflow=&quot;wrap&quot;
        </Typography>
        <Bar overflow="wrap" />
      </div>

      <div>
        <Typography level="caption" color="secondary">
          overflow=&quot;wrap&quot; · lines=2
        </Typography>
        <Bar overflow="wrap" lines={2} />
      </div>
    </div>
  );
}

wheel

마우스에는 휠이 하나뿐이고 그 휠은 페이지 아래쪽을 가리킵니다. 스크롤하는 탭 바가 흐르지 않는 바로 그 축입니다. wheel은 바 위에서 굴린 휠을 바를 따라가는 이동으로 바꿉니다. 기본값은 켜짐입니다. 바에는 스크롤 버튼이 없고 스크롤바도 감춰져 있어서, 페이지가 휠을 받아 가면 가장자리 너머의 탭에는 키보드로만 닿을 수 있습니다.

가져간 휠은 양 끝에서도 놓지 않습니다. 바가 다 떨어졌다고 해서 그 손짓이 글 아래로 뛰어내리는 동작이 되면 안 되기 때문입니다. 페이지가 휠을 되찾는 것은 포인터가 바 밖으로 나갈 때입니다. 자리가 남는 바는 아무것도 가져가지 않으므로, 탭이 세 개뿐인 페이지에는 아무 영향이 없습니다. 옆으로 미는 트랙패드는 브라우저에 맡깁니다. 그쪽이 더 잘 스크롤합니다.

wheel={false}로 끕니다.

import { Tab, TabPanel, Tabs, Typography } from 'neba';

const SECTIONS = [
  'Overview',
  'Activity',
  'Members',
  'Settings',
  'Billing',
  'Integrations',
  'Audit log',
  'Webhooks',
  'API keys',
  'Domains'
];

function Bar(props: { wheel?: boolean }) {
  return (
    <Tabs defaultValue="Overview" {...props}>
      {SECTIONS.map((section) => (
        <Tab key={section} value={section}>
          {section}
        </Tab>
      ))}
      <TabPanel value="Overview">Ten sections in a box too narrow for them.</TabPanel>
    </Tabs>
  );
}

export default function TabsWheel() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div>
        <Typography level="caption" color="secondary">
          Roll over the bar; the page waits until the pointer leaves
        </Typography>
        <Bar />
      </div>

      <div>
        <Typography level="caption" color="secondary">
          wheel={'{false}'} — the wheel is the page&apos;s
        </Typography>
        <Bar wheel={false} />
      </div>
    </div>
  );
}

startIcon과 endIcon

라벨 앞뒤에 아이콘이나 개수를 넣습니다.

import { Badge, Tab, TabPanel, Tabs } from 'neba';

function InboxIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M2 9.5h3l1 2h4l1-2h3M2.5 9.5 4 3.5h8l1.5 6v2a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 2.5 11.5v-2Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function StarIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="m8 2.5 1.7 3.5 3.8.5-2.8 2.7.7 3.8L8 11.2 4.6 13l.7-3.8L2.5 6.5l3.8-.5L8 2.5Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function TabsIcons() {
  return (
    <Tabs variant="solid" defaultValue="inbox" className="w-full max-w-lg">
      <Tab value="inbox" startIcon={<InboxIcon />} endIcon={<Badge content={12} size="xs" />}>
        Inbox
      </Tab>
      <Tab value="starred" startIcon={<StarIcon />}>
        Starred
      </Tab>
      <Tab value="sent">Sent</Tab>

      <TabPanel value="inbox">Twelve unread, four of them from this morning.</TabPanel>
      <TabPanel value="starred">Nothing starred yet.</TabPanel>
      <TabPanel value="sent">Eight sent this week.</TabPanel>
    </Tabs>
  );
}

size

Button과 같은 컨트롤 높이 단계를 씁니다. md 탭과 md Button이 모두 32px이므로 툴바 안에 나란히 놓을 수 있습니다.

activateOnFocus

기본값은 꺼짐입니다. 방향키로 탭을 지나가는 동안에는 패널이 바뀌지 않고, Enter나 Space로 활성화합니다. 패널이 데이터를 불러오는 경우 방향키 이동만으로 요청이 여러 번 발생하는 것을 막습니다.

keepMounted

TabPanel에 지정하면 선택되지 않은 패널의 React 트리를 유지합니다.

접근성

• 탭 바 전체가 tab 정지 하나이고, 그 안에서는 방향키와 Home/End로 이동합니다(roving tab index).
• tab / tabpanel role과 그 사이의 aria-controls가 연결됩니다.
• 패널 안에 focus 받을 요소가 없으면 패널 자체가 focus를 받으므로 키보드로 내용에 닿을 수 있습니다.
• 선택 표시자는 left / top과 width / height로 이동하므로 라벨이 다시 그려지지 않습니다.