UXKM Guide

기본 (라인)

tabs_line이 기본 스킨입니다. role="tablist" · role="tab" · role="tabpanel"과 aria-selected, aria-controls로 접근성을 보장하며 방향키·Home·End 키로 탭을 전환합니다.

프로젝트 개요와 목표를 설명하는 영역입니다. 탭을 클릭하거나 화살표 키로 전환할 수 있습니다.

동적 패널

mode="dynamic"은 탭 메뉴만 나열하고 패널은 하나입니다. 탭 클릭 시 #panel 슬롯 내용이 전환됩니다.

프로젝트 개요와 목표를 설명하는 영역입니다.

TabMenu로 선언한 동적 패널 — 활동

슬라이드 인디케이터

indicator="slide"로 선택 탭 아래(또는 pill 배경) 인디케이터가 부드럽게 이동합니다. line·pill 스킨과 조합합니다.

라인 스킨에서 하단 인디케이터가 탭 전환 시 슬라이드됩니다.

필 스킨에서 배경 인디케이터가 이동합니다.

균등 분할

layout="equal"로 탭 바 전체 너비에 탭을 균등 분할합니다. 라벨이 길면 말줄임됩니다.

탭이 컨테이너 너비에 맞춰 균등하게 배치됩니다.

일간 통계

네비 스크롤

layout="scroll"은 탭이 넘칠 때 좌·우 버튼으로 스크롤합니다. 넘치지 않으면 버튼이 숨겨집니다.

홈 패널

카드

tabs_card로 카드형 탭과 패널을 연결합니다. 폼·설정 화면에 적합합니다.

이름, 아바타, 소개 문구를 수정합니다.

필

tabs_pill로 세그먼트 컨트롤 형태의 탭을 만듭니다. 뷰 전환·필터에 사용합니다.

목록 뷰 콘텐츠

크기

tabs_sm · tabs_lg로 탭 바 스케일을 조절합니다.

Small 탭 패널

Large 탭 패널

아이콘

tabs_icon으로 탭 앞에 아이콘을 배치합니다.

대시보드 요약 패널

배지

tabs_badge에 badge 컴포넌트를 넣어 알림 수·상태를 표시합니다.

전체 알림 목록

추가 액션

tabs_extra로 탭 바 오른쪽에 버튼·링크 등 보조 액션을 배치합니다.

내 파일 목록

스크롤바

scrollable과 layout="auto"를 함께 쓰면 스크롤바가 표시됩니다. 버튼 네비게이션은 layout="scroll"을 사용하세요.

홈 패널

비활성

disabled 속성 또는 is-disabled 클래스로 탭을 비활성화합니다.

공개 콘텐츠

수직

tabs_vertical로 사이드바 형태의 탭을 구성합니다. 라인·카드 스킨과 조합할 수 있습니다.

일반 설정 패널입니다.

문서 관리 패널

API · Tabs Props

Prop	타입	기본값	설명
`mode`	'panels' \| 'dynamic'	panels	panels: 탭별 패널 · dynamic: 단일 패널 콘텐츠 전환
`v-model / model-value`	string \| number	—	mode=dynamic 선택 탭 key
`variant`	'line' \| 'card' \| 'pill'	line	tabs_line · tabs_card · tabs_pill
`indicator`	'static' \| 'slide'	static	line·pill 인디케이터. slide는 선택 탭으로 이동 애니메이션
`layout`	'auto' \| 'equal' \| 'scroll'	auto	auto: 콘텐츠 너비 · equal: 100% 균등 분할 · scroll: 좌우 네비 스크롤
`size`	'sm' \| 'md' \| 'lg'	md	tabs_sm · tabs_lg
`vertical`	boolean	false	tabs_vertical
`scrollable`	boolean	false	layout=auto일 때 가로 스크롤바 표시 (tabs_scrollable)
`aria-label`	string	—	tablist aria-label. vertical에 따라 aria-orientation 자동 설정
`items`	Array<{ key?, label, content?, active?, disabled? }>	—	선언적 탭. panels: content로 패널 생성 · dynamic: label만 사용
`ripple`	boolean	true	클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

API · TabPanel Props

Prop	타입	기본값	설명
`label`	string	—	탭 버튼 텍스트 (필수)
`active`	boolean	false	초기 선택 탭
`disabled`	boolean	false	is-disabled

Prop	타입	기본값	설명
`label`	string	—	탭 버튼 텍스트 (필수)
`value`	string	—	mode=dynamic v-model key
`active`	boolean	false	초기 선택 탭
`disabled`	boolean	false	is-disabled

API · Tabs Slots

슬롯	설명
`tabs`	탭 바 추가 콘텐츠
`extra`	탭 바 우측 영역 (tabs_extra)
`panel`	mode=dynamic 단일 패널 본문 ({ item, value, active })
`default`	TabPanel·TabMenu 나열 (items prop 대체)

API · TabPanel Slots

슬롯	설명
`default`	패널 본문 (tabs_panel)
`icon`	탭 버튼 아이콘
`badge`	탭 버튼 배지

슬롯	설명
`icon`	탭 버튼 아이콘
`badge`	탭 버튼 배지

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`tabs · tabs_bar · tabs_list · tabs_tab`	루트·탭 바·목록·탭 버튼
`tabs_label · tabs_extra · tabs_panels · tabs_panel`	라벨·추가·패널 영역
`tabs_line · tabs_card · tabs_pill`	스타일 변형
`tabs_indicator-slide`	슬라이드 인디케이터 (indicator="slide")
`tabs_indicator`	이동하는 인디케이터 요소
`tabs_equal · tabs_scroll-nav · tabs_dynamic`	균등 분할·네비 스크롤·동적 패널
`tabs_list-wrap · tabs_scroll-viewport · tabs_nav`	목록 래퍼·스크롤 뷰포트·좌우 네비 버튼
`tabs_sm · tabs_lg · tabs_vertical · tabs_scrollable`	크기·레이아웃
`is-active · is-disabled`	탭·패널 상태
`data-tabs`	키보드·포커스 동작 식별자
`role="tablist" · role="tab" · role="tabpanel"`	접근성
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

디자인 토큰

토큰	기본값	설명
`--tabs-gap · --tabs-padding`	—	탭 간격·패딩
`--tabs-nav-size`	—	네비 스크롤 버튼 크기
`--tabs-indicator-height · --tabs-indicator-transition`	—	line 변형 인디케이터·슬라이드 전환
`--tabs-panel-padding`	—	패널 패딩

Tabs