Tabs Bileseni

SkTabs, TB ile kurulan tipli konfigurasyona gore yatay veya dikey sekme duzenleri olusturur.

Importlar

import { TB } from '@lvntr/components/TabBuilder/core';
import SkTabs from '@lvntr/components/TabBuilder/SkTabs.vue';

Temel kullanim

<script setup lang="ts">
import { TB } from '@lvntr/components/TabBuilder/core';
import SkTabs from '@lvntr/components/TabBuilder/SkTabs.vue';

const tabConfig = TB.tabs()
    .queryParam('tab')
    .addTabs(
        TB.item().key('general').label('General').icon('pi pi-user'),
        TB.item().key('security').label('Security').icon('pi pi-shield'),
        TB.item().key('sessions').label('Sessions').icon('pi pi-desktop'),
    )
    .build();
</script>

<template>
    <SkTabs :config="tabConfig">
        <template #general>
            <p>Genel icerik</p>
        </template>

        <template #security>
            <p>Guvenlik icerigi</p>
        </template>

        <template #sessions>
            <p>Oturum icerigi</p>
        </template>
    </SkTabs>
</template>

Tabs builder API

• layout('horizontal' | 'vertical')
• vertical()
• horizontal()
• queryParam(string)
• class(string)
• cardTitle(string)
• cardSubtitle(string)
• isCard(boolean)
• addTabs(...tabs)

Tab item API

• key(string)
• label(string)
• icon(string)
• visible(boolean | () => boolean)
• disabled(boolean | () => boolean)

Dahili davranislar

SkTabs su ozellikleri hazir getirir:

• useUrlTab() ile query string senkronizasyonu
• dikey sidebar modu
• dikey duzende sidebar-header ve sidebar-footer slot'lari
• sekme anahtarina gore slot tabanli icerik

Gerektiginde parent bilesenler aktif sekmeye component expose uzerinden erisebilir.

Tabs Component

SkTabs renders horizontal or vertical tab layouts using a typed config built with TB.

Imports

import { TB } from '@lvntr/components/TabBuilder/core';
import SkTabs from '@lvntr/components/TabBuilder/SkTabs.vue';

Basic usage

<script setup lang="ts">
import { TB } from '@lvntr/components/TabBuilder/core';
import SkTabs from '@lvntr/components/TabBuilder/SkTabs.vue';

const tabConfig = TB.tabs()
    .queryParam('tab')
    .addTabs(
        TB.item().key('general').label('General').icon('pi pi-user'),
        TB.item().key('security').label('Security').icon('pi pi-shield'),
        TB.item().key('sessions').label('Sessions').icon('pi pi-desktop'),
    )
    .build();
</script>

<template>
    <SkTabs :config="tabConfig">
        <template #general>
            <p>General content</p>
        </template>

        <template #security>
            <p>Security content</p>
        </template>

        <template #sessions>
            <p>Session content</p>
        </template>
    </SkTabs>
</template>

Tabs builder API

• layout('horizontal' | 'vertical')
• vertical()
• horizontal()
• queryParam(string)
• class(string)
• cardTitle(string)
• cardSubtitle(string)
• isCard(boolean)
• addTabs(...tabs)

Tab item API

• key(string)
• label(string)
• icon(string)
• visible(boolean | () => boolean)
• disabled(boolean | () => boolean)

Built-in behavior

SkTabs already includes:

• query string synchronization through useUrlTab()
• vertical sidebar mode
• optional sidebar-header and sidebar-footer slots in vertical layout
• slot-based content keyed by the tab id

The active tab is exposed from the component, so parent components can access it when needed.