Tabs

탭 형식의 콘텐츠 전환 컴포넌트입니다. Radix UI Tabs 기반.

Installation

bash
npx axis-cli add tabs

Usage

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

tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@ax/ui'

export function Example() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Account settings content here.
      </TabsContent>
      <TabsContent value="password">
        Password settings content here.
      </TabsContent>
    </Tabs>
  )
}

Components

Tabs

탭 루트 컨테이너

TabsList

탭 트리거 목록 컨테이너

TabsTrigger

탭 선택 버튼

TabsContent

탭 콘텐츠 영역

Props

PropTypeDefaultDescription
defaultValuestring-기본 선택 탭
valuestring-선택된 탭 (controlled)
onValueChange(value: string) => void-탭 변경 콜백
orientation"horizontal" | "vertical""horizontal"탭 방향