GoldTreeDevGTD UI

문서 제목, 아이콘 이름, 앱 이름으로 검색할 수 있어요.

전체 문서 보기 이동 · Enter 열기 · Esc 닫기

Tabs

탭 기반 콘텐츠 전환

사용법

기본

items 배열로 탭 레이블과 콘텐츠를 정의해요. defaultValue로 초기 활성 탭을 지정해요.

컴포넌트 사용 가이드와 토큰을 확인해요.

스타일 커스터마이징

TabsclassNamestyle prop으로 루트 스타일을 덮어쓸 수 있어요.

<Tabs className="rounded-full px-4" style={{ opacity: 0.9 }} />

인터페이스

TabsProps

속성타입기본값설명
defaultValuestring초기 활성 탭 value
items{ value: string; label: string; content: ReactNode }[]탭 목록

Tabs 컴포넌트 Props 표

가져오기

import { Tabs } from "@/components/ui/Tabs";
Tabs · GTD UI | GoldTreeDev Docs