KTabs

示例

Default Tabs

Content for Tab 1

Line Tabs (Day Theme)

Content for Tab 1

Line Tabs (Night Theme)

Content for Tab 1

Tab navigation component with v-model:activeTab binding and default/line variants. Exposes the active tab via a scoped slot.

Props

Name	Type	Default	Description
tabs	Array<{ value: string; label: string; disabled?: boolean }>	—	(required) Array of tab items to render.
activeTab	string	''	The value of the currently active tab.
variant	'default' | 'line'	'default'	Visual variant. 'default' uses a pill-style tab list; 'line' uses an underline indicator.
theme	'auto' | 'day' | 'night'	'auto'	Theme mode. auto follows the current theme; day and night force a specific mode.

Emits

Name	Parameters	Description
update:activeTab	(value: string)	Emitted when a tab is selected.

Slots

Name	Description
default	Scoped slot that receives { activeTab } for rendering tab panels.

Basic Usage

<script setup>
import { ref } from 'vue'
import { KTabs } from '@kK-2004/ui-component'

const activeTab = ref('tab1')
</script>

<template>
  <KTabs
    v-model:activeTab="activeTab"
    :tabs="[
      { value: 'tab1', label: 'First' },
      { value: 'tab2', label: 'Second' },
    ]"
  >
    <template #default="{ activeTab }">
      <div v-if="activeTab === 'tab1'">Content for tab 1</div>
      <div v-if="activeTab === 'tab2'">Content for tab 2</div>
    </template>
  </KTabs>
</template>