Tabs
Компонент навигации по вкладкам для переключения между разделами контента. Поддерживает варианты line, card и pill, иконки, закрываемые вкладки, панели контента и четыре положения (сверху, снизу, слева, справа).
Basic
vue
<script setup>
import { ref } from 'vue'
import { VxTabs } from 'veloxui'
const active = ref('home')
const items = [
{ key: 'home', label: 'Home' },
{ key: 'profile', label: 'Profile' },
{ key: 'settings', label: 'Settings' },
]
</script>
<template>
<VxTabs v-model="active" :items="items" />
</template>With Icons
vue
<VxTabs v-model="active" :items="[
{ key: 'overview', label: 'Overview', icon: 'home' },
{ key: 'analytics', label: 'Analytics', icon: 'chart' },
{ key: 'settings', label: 'Settings', icon: 'settings' },
{ key: 'users', label: 'Users', icon: 'user' },
]" />Disabled Tab
vue
<VxTabs v-model="active" :items="[
{ key: 'general', label: 'General' },
{ key: 'security', label: 'Security' },
{ key: 'billing', label: 'Billing', disabled: true },
{ key: 'notifications', label: 'Notifications' },
]" />Card Variant
vue
<VxTabs v-model="active" :items="items" variant="card" />Pill Variant
vue
<VxTabs v-model="active" :items="items" variant="pill" />Segment Variant
Сегментированные вкладки в стиле pill с обрамлённым телом карточки снизу.
Home
С возвращением! Здесь обзор вашей недавней активности и быстрые действия.
vue
<script setup>
import { ref } from 'vue'
import { VxTabs, VxInput, VxButton, VxSwitch } from 'veloxui'
const active = ref('home')
const items = [
{ key: 'home', label: 'Home' },
{ key: 'profile', label: 'Profile' },
{ key: 'settings', label: 'Settings' },
]
</script>
<template>
<VxTabs v-model="active" :items="items" variant="segment">
<template #panel-home>
<p>Welcome back! Here is an overview of your activity.</p>
</template>
<template #panel-profile>
<VxInput placeholder="Display name" />
<VxButton size="sm">Save</VxButton>
</template>
<template #panel-settings>
<div>Dark mode <VxSwitch /></div>
<div>Notifications <VxSwitch /></div>
</template>
</VxTabs>
</template>Folder Variant
Классический стиль вкладок-папок — активная вкладка плавно соединяется с телом карточки снизу.
Home
С возвращением! Здесь обзор вашей недавней активности и быстрые действия.
vue
<VxTabs v-model="active" :items="items" variant="folder">
<template #panel-home>
<p>Home content here.</p>
</template>
<template #panel-profile>
<p>Profile content here.</p>
</template>
</VxTabs>Closable Tabs
Установите closable: true у элементов вкладок. Слушайте событие close, чтобы удалять вкладки.
vue
<script setup>
import { ref } from 'vue'
import { VxTabs } from 'veloxui'
const active = ref('tab1')
const items = ref([
{ key: 'tab1', label: 'Welcome', closable: false },
{ key: 'tab2', label: 'Document.vue', closable: true },
{ key: 'tab3', label: 'Settings.ts', closable: true },
])
function closeTab(key) {
items.value = items.value.filter(t => t.key !== key)
if (active.value === key) active.value = items.value[0]?.key
}
</script>
<template>
<VxTabs v-model="active" :items="items" variant="card" @close="closeTab" />
</template>Sizes
Три размера: sm, md (по умолчанию) и lg.
vue
<VxTabs :items="items" v-model="active" size="sm" />
<VxTabs :items="items" v-model="active" size="md" />
<VxTabs :items="items" v-model="active" size="lg" />Block Mode
Вкладки растягиваются, чтобы равномерно заполнить всю ширину.
vue
<VxTabs v-model="active" :items="items" block />Content Panels
Используйте слоты panel-{key} для рендеринга контента, переключающегося вместе с вкладками.
Настройки профиля
vue
<VxTabs v-model="active" :items="items">
<template #panel-profile>
<VxInput placeholder="Display name" />
<VxButton size="sm">Save</VxButton>
</template>
<template #panel-password>
<VxInput placeholder="Current password" type="password" />
<VxInput placeholder="New password" type="password" />
<VxButton size="sm">Update</VxButton>
</template>
<template #panel-team>
<p>Invite and manage your team members here.</p>
</template>
</VxTabs>Vertical (Left / Right)
Используйте position="left" или position="right" для вертикальных вкладок.
Общие настройки
Управляйте общими предпочтениями и конфигурацией.
vue
<VxTabs v-model="active" :items="items" position="left">
<template #panel-settings>
<p>General settings content...</p>
</template>
<template #panel-security>
<p>Security content...</p>
</template>
</VxTabs>Bottom Position
Содержимое Home с вкладками снизу.
vue
<VxTabs v-model="active" :items="items" position="bottom">
<template #panel-home>
<p>Home content with tabs at the bottom.</p>
</template>
</VxTabs>API
VxTabs Props
| Prop | Type | Default | Description |
|---|---|---|---|
v-model | string | — | Ключ активной вкладки |
items | TabItem[] | [] | Элементы вкладок |
variant | 'line' | 'card' | 'pill' | 'segment' | 'folder' | 'line' | Визуальный стиль |
size | 'sm' | 'md' | 'lg' | 'md' | Размер вкладки |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Положение панели вкладок |
block | boolean | false | Растягивать вкладки до равной ширины |
root-class | string | string[] | object | — | Класс на корневом элементе |
TabItem
| Property | Type | Required | Description |
|---|---|---|---|
key | string | Да | Уникальный идентификатор |
label | string | Да | Текст подписи вкладки |
icon | string | Component | Нет | Иконка вкладки |
disabled | boolean | Нет | Отключить эту вкладку |
closable | boolean | Нет | Показать кнопку закрытия |
Slots
| Slot | Props | Description |
|---|---|---|
tab | { item, active } | Пользовательское содержимое кнопки вкладки для всех вкладок |
tab-{key} | { item, active } | Пользовательское содержимое кнопки вкладки для конкретной вкладки |
panel | { item, active } | Содержимое панели по умолчанию для всех вкладок |
panel-{key} | { item, active } | Содержимое панели для конкретной вкладки |
extra | — | Дополнительное содержимое после вкладок в панели навигации |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | (key: string) | Активная вкладка изменена |
change | (key: string) | Вкладка выбрана |
close | (key: string) | Нажата кнопка закрытия вкладки |