KRDS Vue

탭 Tab ​

탭은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트이다. 탭 버튼 목록과 콘텐츠 패널이 수직으로 쌓여 있는 형태로 표현되며, 사용자는 탭을 선택하여 해당 콘텐츠 섹션을 표시할 수 있다.

KRDS 가이드

기본 ​

tabs의 각 항목 id와 같은 이름의 슬롯에 패널 내용을 넣습니다. 처음에는 비활성화되지 않은 첫 번째 탭이 선택되고, 선택된 탭에는 스크린 리더용 "선택됨" 텍스트(selectedText)가 붙습니다. 좌우 방향키로 탭 버튼 사이에서 포커스를 옮길 수 있습니다.

탭 1 영역
탭 2 영역
탭 3 영역
vue
<script setup lang="ts">
  import { KrdsTabs } from '@krds.ui/vue'

  const tabs = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' },
    { id: 'tab3', label: '타이틀 3' }
  ]
</script>

<template>
  <KrdsTabs :tabs="tabs">
    <template #tab1>탭 1 영역</template>
    <template #tab2>탭 2 영역</template>
    <template #tab3>탭 3 영역</template>
  </KrdsTabs>
</template>

버튼형 ​

탭 1 영역
탭 2 영역
탭 3 영역
vue
<script setup lang="ts">
  import { KrdsTabs } from '@krds.ui/vue'

  const tabs = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' },
    { id: 'tab3', label: '타이틀 3' }
  ]
</script>

<template>
  <KrdsTabs :tabs="tabs" variant="fill">
    <template #tab1>탭 1 영역</template>
    <template #tab2>탭 2 영역</template>
    <template #tab3>탭 3 영역</template>
  </KrdsTabs>
</template>

풀사이즈 ​

라인형 풀사이즈 탭 1 영역
라인형 풀사이즈 탭 2 영역
버튼형 풀사이즈 탭 1 영역
버튼형 풀사이즈 탭 2 영역
vue
<script setup lang="ts">
  import { KrdsTabs } from '@krds.ui/vue'

  const tabs = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' }
  ]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 4rem">
    <KrdsTabs :tabs="tabs" full>
      <template #tab1>라인형 풀사이즈 탭 1 영역</template>
      <template #tab2>라인형 풀사이즈 탭 2 영역</template>
    </KrdsTabs>
    <KrdsTabs :tabs="tabs" variant="fill" full>
      <template #tab1>버튼형 풀사이즈 탭 1 영역</template>
      <template #tab2>버튼형 풀사이즈 탭 2 영역</template>
    </KrdsTabs>
  </div>
</template>

비활성화 ​

항목에 disabled: true를 주면 해당 탭을 선택할 수 없습니다.

탭 1 영역
탭 2 영역
탭 3 영역
vue
<script setup lang="ts">
  import { KrdsTabs } from '@krds.ui/vue'

  const tabs = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2', disabled: true },
    { id: 'tab3', label: '타이틀 3' }
  ]
</script>

<template>
  <KrdsTabs :tabs="tabs">
    <template #tab1>탭 1 영역</template>
    <template #tab2>탭 2 영역</template>
    <template #tab3>탭 3 영역</template>
  </KrdsTabs>
</template>

외부 제어 ​

v-model로 선택된 탭의 id를 제어합니다. 탭이 바뀌면 change 이벤트도 발생합니다.

현재 탭: tab2

탭 1 영역
탭 2 영역
탭 3 영역
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsTabs } from '@krds.ui/vue'

  const tabs = [
    { id: 'tab1', label: '타이틀 1' },
    { id: 'tab2', label: '타이틀 2' },
    { id: 'tab3', label: '타이틀 3' }
  ]
  const activeTab = ref('tab2')
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 2rem">
    <p>현재 탭: {{ activeTab }}</p>
    <KrdsTabs v-model="activeTab" :tabs="tabs">
      <template #tab1>탭 1 영역</template>
      <template #tab2>탭 2 영역</template>
      <template #tab3>탭 3 영역</template>
    </KrdsTabs>
  </div>
</template>

KrdsTabs ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
variantKrdsTabsVariant'line'탭 스타일 변형
modelValuestring-활성 탭 id (v-model)
fullbooleanfalse풀사이즈 레이아웃 여부
selectedTextstring'선택됨'선택된 탭의 스크린 리더 대체 텍스트
tabs (필수)KrdsTabItem[]-탭 아이템 목록

Events

이름인자설명
change[id: string]탭을 바꿨을 때 (탭 id)
update:modelValue[id: string]선택한 탭 id가 바뀔 때 (v-model)