Secondary Tabs

Secondary Tabs 컴포넌트는 2차 메뉴나 서브 탐색에 사용되는 인터페이스 요소입니다. Primary Tabs와 달리 배경색이 있고 더 컴팩트한 디자인을 가지고 있습니다.

기본 사용법

<template>
    <secondary-tabs
        :active-tab="activeTab"
        :tabs="tabs"
        @select:tab="handleSelectTab"
        @focus:tab="handleFocusTab"
    />
</template>

<script setup lang="ts">
const tabs = [
    { tabKey: 'tab1', label: '전체', tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab2', label: '경고', tooltip: { text: '툴팁 내용' } },
    {
        tabKey: 'tab3',
        label: '에러',
        icon: ICON_TYPE.error,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab4',
        label: 'Tab 4',
        badgeContent: 10,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab5',
        label: 'Tab 5',
        badgeContent: 10,
        icon: ICON_TYPE.error,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab6',
        label: 'Tab 6',
        disabled: true,
        badgeContent: 10,
        icon: ICON_TYPE.error,
    },
];
const activeTab = ref('tab1');

const handleSelectTab = (key) => {
    activeTab.value = key;
    console.log('Tab selected:', key);
};
const handleFocusTab = (key) => {
    console.log('Tab focused:', key);
};
</script>

Props

SecondaryTabs 컴포넌트

Prop 이름	타입	필수 여부	설명
activeTab	string | number | symbol	Yes	현재 선택된 탭의 키
tabs	TabItem[]	Yes	탭 아이템 배열
tabIdentifier	string	No	탭 키 생성용 접두사

TabItem 인터페이스

속성	타입	필수 여부	설명
tabKey	string | number | symbol	Yes	탭을 식별하는 고유 키
label	string	Yes	탭에 표시될 텍스트
disabled	boolean	No	탭 비활성화 여부
tooltip	TooltipProps	No	탭에 표시될 툴팁
icon	IconTypes	No	탭에 표시될 아이콘
badgeContent	number	No	배지에 표시될 숫자
contextKey	any	No	탭의 컨텍스트 키

Example

tab1

Events

이벤트 이름	파라미터	설명
select:tab	tabKey: string | number | symbol	탭이 선택되었을 때 발생
focus:tab	tabKey: string | number | symbol	탭이 포커스되었을 때 발생

접근성

• 키보드 탐색이 지원됩니다 (← →)
• 비활성화된 탭은 disabled 속성이 적용됩니다
• 포커스 시 시각적 표시가 제공됩니다

Tab Contraction (Secondary)

Secondary Tabs 역시 조합형 API(TabContraction)로 사용할 수 있습니다. Primary와 동일한 계약을 따르며, 스타일만 secondary로 적용합니다.

• [TabList]: type='secondary'를 지정하면 인디케이터 없이 세컨더리 스타일이 적용됩니다
• [SecondaryTab]: 각 탭 아이템(아이콘/배지/툴팁/disabled 지원)
• [contextKey]: 동일 화면 내 여러 탭 그룹 간 간섭 방지

TabList (secondary)

Props

Prop 이름	타입	필수 여부	기본값	설명
selectedKey	string | number | symbol	Yes	-	현재 선택된 탭의 키
contextKey	string | InjectionKey<TabContraction['context']>	No	'tabContext'	탭 그룹 컨텍스트 키
type	'secondary'	No	'secondary'	세컨더리 스타일 강제

Events

이벤트 이름	파라미터	설명
select:tab	tabKey: string | number | symbol	탭이 선택되었을 때 발생
focus:tab	tabKey: string | number | symbol	탭이 포커스되었을 때

SecondaryTab

Props

Prop 이름	타입	필수 여부	기본값	설명
contextKey	string | InjectionKey<TabContraction['context']>	No	-	탭 컨텍스트 키
tabKey	string | number | symbol	Yes	-	탭 고유 키
label	string	Yes	-	탭 라벨
disabled	boolean	No	false	비활성화 여부
tooltip	TooltipProps	No	-	툴팁
icon	IconTypes	No	-	아이콘
badgeContent	number	No	-	배지 숫자

Context API

이름	타입	설명
selectedKey	Ref<string | number | symbol>	현재 선택된 탭 키
focusedKey	Ref<string | number | symbol | null>	현재 포커스된 탭 키
tabElemMap	Map<string | number | symbol, HTMLElement>	탭 키와 엘리먼트 매핑
tabOrder	(string | number | symbol)[]	탭 렌더링 및 탐색 순서
selectTab	(key: string | number | symbol) => void	지정 키를 선택
focusTab	(key: string | number | symbol) => void	지정 키로 포커스 이동
register	(key: string | number | symbol, el: HTMLElement) => void	탭 요소 등록

예시: 조합형 사용(Secondary)

<template>
  <tab-list
    type="secondary"
    :selected-key="active"
    :context-key="contextKey"
    @select:tab="onSelect"
    @focus:tab="onFocus"
  >
    <secondary-tab :context-key="contextKey" tab-key="tab1" label="전체" />
    <secondary-tab :context-key="contextKey" tab-key="tab2" label="경고" />
    <secondary-tab :context-key="contextKey" tab-key="tab3" label="에러" />
  </tab-list>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TabList, SecondaryTab } from '@jennifersoft/vue-components-v2';

const contextKey = Symbol('tabContext');
const active = ref('tab1');

const onSelect = (key: string | number | symbol) => {
  active.value = key as any;
};
const onFocus = (key: string | number | symbol) => {
  console.log('focus', key);
};
</script>