Skip to Content
ComponentsIcignalTabs

Tabs

Foundation Tabs를 래핑하여 Overflow 처리, Dropdown 메뉴, Tooltip 등 확장 기능을 제공하는 컴포넌트

개요

iCignal Tabs 컴포넌트는 Foundation Tabs를 기반으로 선언적 탭-콘텐츠 매핑, Overflow 시 Dropdown 메뉴, 탭 레이블 Tooltip 등의 확장 기능을 제공합니다.

주요 특징

  • ✅ 선언적 탭-콘텐츠 매핑: items prop으로 탭과 콘텐츠를 1:1 매핑
  • ✅ Overflow Dropdown: 화면 초과 시 자동으로 Dropdown 버튼 표시
  • ✅ Dropdown 탭 재배치: Dropdown 선택 시 마지막 보이는 탭과 위치 교환
  • ✅ Tooltip 지원: 고정 너비 탭의 Ellipsis 레이블에 Tooltip 제공
  • ✅ 리사이즈 반응: ResizeObserver로 Overflow 자동 재계산
  • ✅ 3가지 variant: default, line, outline

기본 사용법

items prop으로 탭 레이블과 콘텐츠를 선언적으로 매핑합니다.

Tooltip 제공

tabWidth로 고정 너비를 설정하면 Ellipsis 처리된 탭에 Tooltip이 자동으로 활성화됩니다.

Overflow 메뉴 표시

탭 개수가 화면 가로 사이즈를 초과할 경우 우측에 Dropdown(⋯) 버튼이 표시됩니다.

Dropdown 내 탭 선택 시 해당 탭이 활성화되고 콘텐츠가 전환됩니다. 선택된 탭은 마지막 보이는 탭 위치로 이동하고, 기존 탭은 Dropdown으로 이동합니다.

Overflow 자동 재계산

화면 가로 사이즈 변경 시 ResizeObserver를 통해 탭을 자동으로 재계산합니다. 여유 공간이 생기면 Dropdown 내 탭을 기본 영역으로 복원합니다.

API Reference

Props

PropTypeDefaultDescription
itemsTabItem[]-탭 항목 배열 (필수)
valuestring-제어형 선택 탭
defaultValuestring-기본 선택 탭
variant"default" | "line" | "outline""default"스타일 variant
orientation"horizontal" | "vertical""horizontal"방향
overflowbooleantrueOverflow Dropdown 활성화
tooltipbooleantrueTooltip 활성화 (tabWidth 필요)
tabWidthnumber-고정 탭 너비 (px, truncation 활성)
classNamestring-루트 추가 CSS 클래스
listClassNamestring-TabsList 추가 CSS 클래스

Events

EventTypeDescription
onValueChange(value: string) => void탭 변경 시 호출

TabItem

PropertyTypeRequiredDescription
valuestring✅탭 식별값
labelstring✅탭 레이블
contentReact.ReactNode-탭 콘텐츠
disabledboolean-비활성화 여부

기본 사용법

import { Tabs } from "@vortex/ui-icignal"
 
<Tabs
  defaultValue="tab1"
  items={[
    { value: "tab1", label: "Tab 1", content: <div>Content 1</div> },
    { value: "tab2", label: "Tab 2", content: <div>Content 2</div> },
  ]}
/>

접근성

권장 사항

  • ✅ 키보드 화살표로 탭 간 이동 가능 (Foundation 내장)
  • ✅ Tab/Enter로 탭 활성화
  • ✅ aria-selected 자동 관리
  • ✅ Dropdown 버튼에 키보드 접근 가능

관련 컴포넌트

Last updated on
TabNavigationTag