Tabs

관련 콘텐츠를 그룹화하여 탭으로 전환하는 컴포넌트

Basic Usage

여러 패널 사이를 전환할 수 있는 탭 컴포넌트입니다.

계정 설정을 변경할 수 있습니다.

tsx

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">계정</TabsTrigger>
    <TabsTrigger value="password">비밀번호</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    계정 설정을 변경할 수 있습니다.
  </TabsContent>
  <TabsContent value="password">
    비밀번호를 변경할 수 있습니다.
  </TabsContent>
</Tabs>

Multiple Tabs

여러 개의 탭을 사용할 수 있습니다.

개요 탭 콘텐츠

tsx

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">개요</TabsTrigger>
    <TabsTrigger value="analytics">분석</TabsTrigger>
    <TabsTrigger value="reports">리포트</TabsTrigger>
    <TabsTrigger value="notifications">알림</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">개요 콘텐츠</TabsContent>
  <TabsContent value="analytics">분석 콘텐츠</TabsContent>
  <TabsContent value="reports">리포트 콘텐츠</TabsContent>
  <TabsContent value="notifications">알림 콘텐츠</TabsContent>
</Tabs>

Disabled Tab

특정 탭을 비활성화할 수 있습니다.

활성 탭입니다.

tsx

<Tabs defaultValue="active">
  <TabsList>
    <TabsTrigger value="active">활성</TabsTrigger>
    <TabsTrigger value="disabled" disabled>비활성</TabsTrigger>
    <TabsTrigger value="other">기타</TabsTrigger>
  </TabsList>
  {/* ... */}
</Tabs>

Usage

tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@gpters-internal/ui';

function Example() {
  return (
    <Tabs defaultValue="tab1" onValueChange={(value) => console.log(value)}>
      <TabsList>
        <TabsTrigger value="tab1">탭 1</TabsTrigger>
        <TabsTrigger value="tab2">탭 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">콘텐츠 1</TabsContent>
      <TabsContent value="tab2">콘텐츠 2</TabsContent>
    </Tabs>
  );
}