Tabs

Tabs

한 번에 하나씩 표시할 콘텐츠 섹션 묶음이에요.

출처: 문서

본문

여러 콘텐츠 패널 중 하나를 선택해 보여 주는 탭 인터페이스예요.

<Tabs.Root defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>

    <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
  </Tabs.List>

  <Box pt="3">
    <Tabs.Content value="account">
      <Text size="2">Make changes to your account.</Text>
    </Tabs.Content>

    <Tabs.Content value="documents">
      <Text size="2">Access and update your documents.</Text>
    </Tabs.Content>

    <Tabs.Content value="settings">
      <Text size="2">Edit your profile or update contact information.</Text>
    </Tabs.Content>
  </Box>
</Tabs.Root>

이 컴포넌트는 Tabs primitive의 props를 상속받으며, 공통 margin props를 지원해요.

Root

모든 컴포넌트 부분을 감싸요.

Prop Type Default
asChild boolean No default value

List

활성 콘텐츠 옆에 놓이는 트리거들을 감싸요.

Prop Type Default
size Responsive<"1" | "2"> "2"
wrap Responsive<"nowrap" | "wrap" | "wrap-reverse"> No default value
justify Responsive<"start" | "center" | "end"> No default value
color enum No default value
highContrast boolean No default value

Trigger

연결된 콘텐츠를 활성화하는 버튼이에요.

Content

각 트리거와 연결된 콘텐츠를 담아요.

예시 (Examples)

Size

size prop으로 탭 목록의 크기를 제어할 수 있어요.

<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List size="1">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List size="2">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

Color

color prop으로 탭 목록에 특정 색상을 지정할 수 있어요.

<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List color="indigo">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="cyan">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="orange">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="crimson">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높일 수 있어요.

<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List color="gray">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="gray" highContrast>
      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

Tabs는 페이지 내비게이션에 사용하면 안 돼요. 그 목적에 맞게 설계되고 동등한 스타일을 갖춘 Tab Nav를 대신 사용해 주세요.

더 알아보기 (Learn more)

  • 페이지 이동이 아니라 콘텐츠 패널 전환을 위한 컴포넌트예요. 페이지 내비게이션에는 Tab Nav를 사용해 주세요.