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>

Example

tab1

Props

SecondaryTabs 컴포넌트

Prop 이름	타입	필수 여부	설명
activeTab	string	Yes	현재 선택된 탭의 키
tabs	TabItem[]	Yes	탭 아이템 배열

TabItem 인터페이스

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

Events

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

접근성

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