AIFT Design
Components

Tabs

탭 컴포넌트

Tabs

탭 컴포넌트는 여러 콘텐츠를 탭으로 구분하여 표시합니다.

기본 사용법

Tab 1의 콘텐츠입니다.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@aift/ui/Tabs';export default function Preview() {  return (    <div className="max-w-md">      <Tabs defaultValue="tab1" variant="shadcn">        <TabsList>          <TabsTrigger value="tab1">Tab 1</TabsTrigger>          <TabsTrigger value="tab2">Tab 2</TabsTrigger>          <TabsTrigger value="tab3">Tab 3</TabsTrigger>        </TabsList>        <TabsContent value="tab1" className="p-4">          <p>Tab 1의 콘텐츠입니다.</p>        </TabsContent>        <TabsContent value="tab2" className="p-4">          <p>Tab 2의 콘텐츠입니다.</p>        </TabsContent>        <TabsContent value="tab3" className="p-4">          <p>Tab 3의 콘텐츠입니다.</p>        </TabsContent>      </Tabs>    </div>  );}

Props

Tabs 컴포넌트는 Radix UI의 Tabs를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.

  • Tabs: 루트 컴포넌트
  • TabsList: 탭 리스트
  • TabsTrigger: 탭 트리거
  • TabsContent: 탭 콘텐츠

On this page