VerticalTab
VerticalTab은 수직 방향으로 정렬된 탭 메뉴를 제공하는 컴포넌트입니다. 사이드바 내비게이션이나 수직 형태의 탭 인터페이스가 필요한 경우에 사용하며, 모바일 환경에서는 선택적으로 Select 컴포넌트로 변환할 수 있습니다.
인터랙티브 예제
아래 UI에서 다양한 속성을 직접 변경하여 VerticalTab 컴포넌트의 모습을 확인해보세요.
activeTabstring
활성 탭 ID를 입력합니다.
typeselect
탭 타입을 선택합니다.
breakPointselect
반응형 브레이크포인트를 선택합니다.
menusarray
탭 메뉴를 입력합니다.
menuobject
아이템 편집
idstring
탭 ID를 입력합니다.
labelstring
탭 라벨을 입력합니다.
menuobject
아이템 편집
idstring
탭 ID를 입력합니다.
labelstring
탭 라벨을 입력합니다.
menuobject
아이템 편집
idstring
탭 ID를 입력합니다.
labelstring
탭 라벨을 입력합니다.
기본 사용법
import { VerticalTab } from '@ncds/ui-admin';
function App() {
const [activeTab, setActiveTab] = useState('tab1');
const menus = [
{ id: 'tab1', label: '탭 1' },
{ id: 'tab2', label: '탭 2' },
{ id: 'tab3', label: '탭 3' },
];
return <VerticalTab menus={menus} activeTab={activeTab} onClick={(id) => setActiveTab(id)} />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'button-primary' | 'button-white' | 'line-vertical' | 'button-primary' | 탭 버튼의 스타일 유형을 지정합니다. |
| breakPoint | 'mobile' | 'desktop' | - | 반응형 동작을 위한 브레이크포인트를 설정합니다. 설정 시 모바일 환경에서는 드롭다운 메뉴로 표시됩니다. |
| activeTab | string | - | 현재 활성화된 탭의 ID를 지정합니다. |
| menus | Array<TabButtonProps> | - | 탭 메뉴 배열을 지정합니다. 각 메뉴는 id, label, href, target, badgeInfo 등의 속성을 가질 수 있습니다. |
| onClick | (id: string) => void | - | 탭을 클릭했을 때 호출되는 콜백 함수입니다. 선택된 탭의 ID가 매개변수로 전달됩니다. |
TabButtonProps 타입
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | 탭의 고유 식별자입니다. |
| label | string | - | 탭에 표시되는 텍스트 레이블입니다. |
| href | string | - | 탭이 링크로 작동하도록 할 때 사용되는 URL입니다. |
| target | '_self' | '_blank' | '_self' | 링크가 열리는 방식을 지정합니다. |
| badgeInfo | BadgeProps | - | 탭에 뱃지를 추가할 때 사용되는 속성입니다. |
| isActive | boolean | false | 탭의 활성화 상태를 지정합니다. 일반적으로 이 속성은 내부적으로 관리됩니다. |
상세 예제 (Detailed Examples)
다양한 스타일 유형
VerticalTab은 세 가지 스타일 유형을 지원합니다.
button-primary (기본)
button-white
line-vertical
모바일 환경에서의 동작
반응형 인터페이스를 위해 breakPoint 속성을 설정하면 모바일 환경에서는 드롭다운 메뉴로 변환됩니다.
뱃지 사용하기
탭에 뱃지를 추가하여 추가 정보를 표시할 수 있습니다.
링크로 사용하기
탭을 링크로 사용하여 다른 페이지로 이동할 수 있습니다.