Tabs

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

Installation

bash
npx axis-cli add tabs

Usage

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

tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@axis-ds/ui-react'

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

defaultValue
Type:string
Default:-

기본 선택 탭

value
Type:string
Default:-

선택된 탭 (controlled)

onValueChange
Type:(value: string) => void
Default:-

탭 변경 콜백

orientation
Type:"horizontal" | "vertical"
Default:"horizontal"

탭 방향