Tabs

탭 기반으로 콘텐츠를 전환하는 컴포넌트입니다. 다양한 스타일과 방향을 지원합니다.

설치

Terminal
npx @msub-core/ui-cli add tabs

사용법

TSX
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@msub-core/ui/components/tabs"

function MyComponent() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">탭 1</TabsTrigger>
        <TabsTrigger value="tab2">탭 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">탭 1 내용</TabsContent>
      <TabsContent value="tab2">탭 2 내용</TabsContent>
    </Tabs>
  )
}

기본

계정 설정

계정 정보를 관리하고 프로필을 업데이트하세요.

PropTypeDefaultRequiredDescription
valuestring-No선택된 탭 값 (controlled)
defaultValuestring-No기본 선택 탭 값 (uncontrolled)
onValueChange(value: string) => void-No탭 변경 핸들러
variant"line" | "enclosed" | "soft" | "pills""line"No스타일 변형
size"sm" | "default" | "lg""default"No탭 크기
orientation"horizontal" | "vertical""horizontal"No탭 방향
disabledbooleanfalseNo전체 비활성화

Variants

Line (기본)

Enclosed

Soft

Pills

Sizes

Small

Default

Large

아이콘 & 뱃지

홈 화면 콘텐츠
PropTypeDefaultRequiredDescription
valuestring-Yes탭 값
iconReactNode-No왼쪽 아이콘
badgeReactNode | number-No뱃지 또는 숫자
disabledbooleanfalseNo비활성화

전체 너비

전체 목록

세로 방향

일반 설정

애플리케이션의 일반적인 설정을 관리합니다.

비활성화

개별 탭 비활성화

전체 비활성화

SimpleTabs 프리셋

프로젝트 개요

프로젝트의 전체적인 현황을 확인하세요.

PropTypeDefaultRequiredDescription
itemsSimpleTabItem[]-Yes탭 아이템 목록
fullWidthbooleanfalseNo전체 너비
contentClassNamestring-No컨텐츠 영역 추가 클래스

실제 사용 예시

설정

언어

한국어