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: 탭 콘텐츠