Appearance
Responsive Tabs
ResponsiveTabs 컴포넌트는 화면 너비나 컨테이너 공간이 부족할 때, 초과되는 탭을 드롭다운 메뉴로 자동 숨김 처리하는 반응형 탭 UI입니다.
Architecture
ResponsiveTabs.vue: 탭들을 감싸는 Wrapper 컴포넌트입니다.ResizeObserver를 활용하여 컴포넌트의 가로 폭을 실시간으로 감지하고, 화면에 표시할 수 있는ResponsiveTab의 개수를 동적으로 계산합니다. 잘리는 탭들은MenuBox를 이용해 더보기 메뉴 하위에 드롭다운 형태로 표시됩니다.ResponsiveTab.vue: 개별 탭을 구성하는 컴포넌트입니다. 텍스트 너비가 부족하여 말줄임표(...)가 생기는 경우 툴팁으로 전체 레이블을 보여주며, 탭이 선택되었거나 마우스가 호버된 상태에서만 닫기 버튼을 노출하는 등의 실용적인 UI/UX 로직이 포함되어 있습니다. 아이콘 및 배지 표시를 지원합니다.
Features
- 반응형 탭 (Responsive Layouts):
ResizeObserver를 통해 창의 크기가 변할 때마다 탭의 크기를 계산하고 "더보기" 버튼 안에 숨기거나 다시 나타나도록 처리합니다. - 콘텐츠 폭 기준 모드:
tabWidthMode="content"를 사용하면 각 탭이 라벨/아이콘/배지 길이를 기준으로 폭을 사용하되,tabMinWidth와tabMaxWidth범위는 그대로 유지합니다.tabListFull이true여도 탭 폭은 균등 분배되지 않고 콘텐츠 기준 폭을 유지합니다. - 자동 포커싱 스크롤: "더보기" 드롭다운 메뉴 안에서 현재 선택된 탭이 활성화 상태일 경우, 해당 메뉴를 열면 자동으로 해당 탭으로 스크롤되는 기능을 포함합니다 (MenuBox와 MenuContainer 기본 동작 연동).
- 접근성(Accessibility): 기존 키보드 내비게이션(Arrow Key 등)을 그대로 유지하며 탭 전환이 가능합니다.
Example
1번 사례 (tab-min-width: 150, tab-max-width: 150)
Selected Tab: tab1
2번 사례 (tab-min-width: 80, tab-max-width: 100, more-menu-max-width: 100)
Selected Tab: tab1
3번 사례 (tab-min-width: 80, tab-max-width: 120, tab-list-full)
Selected Tab: tab1
4번 사례 (tab-list-full, slot:left, slot:right)
Selected Tab: tab1
5번 사례 (tab-width-mode: content, tab-list-full)
Selected Tab: tab1
Props
ResponsiveTabs
| Prop | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
tabs | ResponsiveTabItemProps<T>[] | O | - | 화면에 표시될 대상 탭들의 배열 객체. |
activeTab | TabKey | O | - | 현재 선택/활성화된 탭의 키 (Key). |
tabIdentifier | string | - | - | 탭 요소들의 v-for key 부여를 위한 고유 접두사. |
tabMinWidth | number | - | 10 | 탭의 최소 지정 너비. |
tabMaxWidth | number | - | 3000 | 탭의 최대 가변 너비. |
tabWidthMode | 'adaptive' | 'content' | - | adaptive | 탭 폭 계산 방식. content 는 콘텐츠 기준 폭을 사용하며, tabListFull 이 true 여도 탭 폭은 콘텐츠 기준으로 유지됩니다. |
moreMenuMaxWidth | number | - | 200 | 더보기 드롭다운 메뉴의 가로 길이 하한선. |
moreMenuMaxHeight | number | - | 200 | 더보기 드롭다운 메뉴의 브라우저 높이 제한 공간. |
tabListFull | boolean | - | false | 탭 컨테이너가 부모 요소의 전체 폭(100%)을 채울지 여부. |
ResponsiveTabs Events
| Event Name | Payload | 설명 |
|---|---|---|
@select:tab | TabKey | 탭이 클릭되거나 드롭다운에서 선택 될 때 발생합니다. |
@close:tab | TabKey | 탭의 닫기(X) 버튼이 클릭될 때 발생합니다. |
ResponsiveTab
| Prop | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
tabKey | TabKey | O | - | 탭을 고유하게 식별하기 위한 값. |
label | string | O | - | 탭에 표시할 텍스트 라벨. |
icon | string | - | - | 탭의 아이콘 종류. |
disabled | boolean | - | false | 탭 비활성화 여부 지정. |
closable | boolean | - | true | 탭 닫기 버튼 표시 여부 지정. |
badgeContent | string | - | - | 숫자 또는 문자 뱃지 표시 내용. |
Used Packages
@vueuse/core(ResizeObserver,useElementBounding)@vueuse/components(vOnClickOutside)@jennifersoft/vue-components-v2의 내부 컴포넌트들 (MenuBox,MenuContainer,Btn)