UI 가이드

다크 모드

ScTab ​

ScTab은 탭 전환 UI를 위한 공통 컴포넌트입니다.
<sc-tab-box>를 중심으로 <sc-tab-content>와 <sc-tab-label>을 조합하여 구성되며, 탭 클릭을 통한 콘텐츠 전환, 긴 라벨의 자동 툴팁 처리, 스크롤 내비게이션 등을 제공합니다.

✅ 기본 사용법 ​

탭 1 내용
선택중인 Tab Idx : 1
vue
<sc-tab-box @click="onClick">
  <sc-tab-content label="TAB 1" :idx="1">탭 1 내용</sc-tab-content>
  <sc-tab-content label="TAB 2" :idx="2">탭 2 내용</sc-tab-content>
  <sc-tab-content label="TAB 3" :idx="3">탭 3 내용</sc-tab-content>
  <sc-tab-content label="TAB 라벨명이 굉장히 길 경우 Tooltip 발생" :idx="4">
    탭 4 내용
  </sc-tab-content>
  <!-- Tab label 메뉴 사용자 Custom -->
  <sc-tab-label :idx="5">
    <span style="color: yellowgreen; font-weight: bold">Custom 탭 메뉴</span>
  </sc-tab-label>
  <sc-tab-content label="TAB 5" :idx="5">탭 5 내용</sc-tab-content>
</sc-tab-box>

<div class="mt-5 text-sm">선택중인 Tab Idx : {{ selectedTabId }}</div>

✨ 사용 예시 모음 ​

▸ init-idx 최초로 보여주는 탭 ​

탭 1 내용
vue
<!-- init-idx 두번째 탭으로 설정 -->
<sc-tab-box init-idx="2">
  <sc-tab-content label="TAB 1" :idx="0">탭 1 내용</sc-tab-content>
  <sc-tab-content label="TAB 2" :idx="1">탭 2 내용</sc-tab-content>
  <sc-tab-content label="TAB 3" :idx="2">탭 3 내용</sc-tab-content>
</sc-tab-box>

▸ 동적 탭 추가/삭제 ​

탭 1 내용
vue
<div class="my-5">
  <sc-button @click="() => tabSize++">탭 추가</sc-button>
  <sc-button @click="() => (tabSize = Math.max(1, tabSize - 1))">탭 제거</sc-button>
</div>

<sc-tab-box>
  <sc-tab-content
    v-for="idx in tabSize"
    :key="idx"
    :idx="idx"
    :label="`TAB ${idx}`"
  >
    탭 {{ idx }} 내용
  </sc-tab-content>
</sc-tab-box>

<script setup>
const tabSize = ref(10);
</script>

🛠️ 구성 요소 ​

컴포넌트명설명
ScTabBox탭 전체 컨테이너. 라벨 렌더링, 클릭 이벤트 처리, 스크롤 내비게이션 포함
ScTabContent각 탭별 콘텐츠 영역. 탭 선택 여부에 따라 표시됨
ScTabLabel텔레포트 방식으로 라벨을 커스터마이징할 수 있음

🛠️ 속성 (Props) ​

📦 ScTabBox ​

이름타입기본값설명
initIdxNumber1최초로 표시할 탭의 idx
navigationBooleantrue탭 내비게이션 버튼 표시 여부

📦 ScTabContent ​

이름타입기본값설명
idxNumber-탭을 구분할 고유 인덱스
labelString-탭 라벨 텍스트

📦 ScTabLabel ​

이름타입설명
idxNumber커스터마이징 할 라벨의 인덱스

📤 이벤트 (Emits) ​

이벤트 이름설명
click탭 클릭 시 해당 idx emit 됨
tab-box-ready탭 초기 렌더링 완료 이벤트

🔳 슬롯 (Slots) ​

슬롯 이름설명
default<sc-tab-content> 및 <sc-tab-label> 포함

💡 기타 참고사항 ​

  • 라벨 텍스트가 20자 이상인 경우 자동으로 Tooltip이 적용됩니다.
  • <sc-tab-label>은 텔레포트 방식으로 기존 탭 라벨을 원하는 위치에 커스터마이징할 수 있습니다.
  • 탭이 많을 경우 navigation 옵션에 따라 우측 내비게이션 버튼이 자동 생성됩니다.