Tabs

탭 네비게이션 컴포넌트입니다.

개요

Tabs는 관련된 콘텐츠를 탭으로 전환하며 표시하는 컴포넌트입니다.

설치


npx @vortex/cli add tabs --package foundation

기본 사용법


import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@vortex/ui-foundation";
 
export default function Example() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">탭 1</TabsTrigger>
        <TabsTrigger value="tab2">탭 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">
        <p>탭 1 내용</p>
      </TabsContent>
      <TabsContent value="tab2">
        <p>탭 2 내용</p>
      </TabsContent>
    </Tabs>
  );
}

Props API

Prop	Type	Default	Description
defaultValue	string	-	기본 선택 탭
value	string	-	선택된 탭
onValueChange	(value) => void	-	탭 변경 핸들러