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>
)
}기본
계정 설정
계정 정보를 관리하고 프로필을 업데이트하세요.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | string | - | No | 선택된 탭 값 (controlled) |
| defaultValue | string | - | 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 | 탭 방향 |
| disabled | boolean | false | No | 전체 비활성화 |
Variants
Line (기본)
Enclosed
Soft
Pills
Sizes
Small
Default
Large
아이콘 & 뱃지
홈 화면 콘텐츠
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | string | - | Yes | 탭 값 |
| icon | ReactNode | - | No | 왼쪽 아이콘 |
| badge | ReactNode | number | - | No | 뱃지 또는 숫자 |
| disabled | boolean | false | No | 비활성화 |
전체 너비
전체 목록
세로 방향
일반 설정
애플리케이션의 일반적인 설정을 관리합니다.
비활성화
개별 탭 비활성화
전체 비활성화
SimpleTabs 프리셋
프로젝트 개요
프로젝트의 전체적인 현황을 확인하세요.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| items | SimpleTabItem[] | - | Yes | 탭 아이템 목록 |
| fullWidth | boolean | false | No | 전체 너비 |
| contentClassName | string | - | No | 컨텐츠 영역 추가 클래스 |
실제 사용 예시
설정
언어
한국어