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>

Element is missing end tag.