Tabs 탭

콘텐츠 영역 전환 컴포넌트입니다. 선형/카드 두 가지 외관을 지원하고, 비활성화, 닫기 가능, 추가 가능, 하단 탭을 지원합니다.

탭

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhTabs v-model="active">
      <LhTabPane name="song" label="송대">
        <p class="demo-note">범관의 계산행려도, 곽희의 조춘도.</p>
      </LhTabPane>
      <LhTabPane name="yuan" label="원대">
        <p class="demo-note">황공망의 부춘산거도.</p>
      </LhTabPane>
      <LhTabPane name="ming" label="명대" disabled>
        <p class="demo-note">비활성화된 탭.</p>
      </LhTabPane>
    </LhTabs>
    <p class="demo-note">v-model={{ active }}</p>
    <LhTabs v-model="active2" type="card" tab-position="bottom" closable addable>
      <LhTabPane v-for="t in panes" :key="t.name" :name="t.name" :label="t.label">
        <p class="demo-note">{{ t.label }} 내용</p>
      </LhTabPane>
    </LhTabs>
    <p class="demo-note">card + 하단 탭 + closable + addable</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'song',
    active2: 'a',
    panes: [
      { name: 'a', label: '두루마리 A' },
      { name: 'b', label: '두루마리 B' },
      { name: 'c', label: '두루마리 C' },
    ],
  }),
}
</script>

Tabs Props

프로퍼티	설명	타입	기본값
v-model	현재 활성화된 탭의 name (제어 modelValue prop)	string	—
type	외관	'line' \| 'card'	'line'
closable	탭을 닫을 수 있는지	boolean	false
addable	추가 버튼 표시 여부	boolean	false
tabPosition	탭 위치	'top' \| 'bottom'	'top'
sx	sx 레이아웃 단축 프로퍼티	—	—

TabPane Props

프로퍼티	설명	타입	기본값
name	탭의 고유 식별자 (안정적인 키로 사용, 동적 수정은 권장하지 않음)	string	—
label	탭 제목	string	—
disabled	비활성화 여부	boolean	false

Slots

슬롯	설명
TabPane default	탭 내용