Tabs

탭(Tabs) 컴포넌트는 사용자가 키보드나 마우스를 사용하여 여러 개의 콘텐츠 패널 중 하나를 선택하고 전환할 수 있도록 하는 요소입니다. 각 탭은 특정 패널을 대표하며, 클릭 또는 선택 시 해당 패널의 내용이 표시됩니다.

기본 사용법

vue

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

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

const tabs = [
    { tabKey: 'tab1', label: 'Tab 1', tooltip: { text: '툴팁 내용' } },
    {
        tabKey: 'tab2',
        label: 'Tab 2 Tab 2 Tab 2',
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab3',
        label: 'Tab 3',
        icon: ICON_TYPE.pod,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab4',
        label: 'Tab 4',
        badgeContent: 10,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab5',
        label: 'Tab 5',
        badgeContent: 10,
        icon: ICON_TYPE.pod,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab6',
        label: 'Tab 6',
        disabled: true,
        badgeContent: 10,
        icon: ICON_TYPE.pod,
    },
];
const activeTab = ref('tab1');

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

Example

tab1

Props

Tabs 컴포넌트

Prop 이름	타입	필수 여부	설명
activeTab	string	Yes	현재 선택된 탭의 키
tabs	TabItem[]	Yes	탭 아이템 배열
tabIdentifier	string	No	탭의 고유 키를 생성할 때 사용되는 접두사 식별자

tabIdentifier 는 tabs props가 변경되었지만 tab key가 그대로 유지되는 경우 indicator가 제대로 작동하지 않거나 Tab 컴포넌트 자체가 제대로 업데이트 되지 않는 현상을 방지하기 위한 추가 식별자입니다.

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 속성이 적용됩니다

Tabs ​

기본 사용법 ​

Example ​

Props ​

Tabs 컴포넌트 ​

TabItem 인터페이스 ​

Events ​

접근성 ​