pages._explore-components-structural-tabs.title

pages._explore.sections.basic-usage.title

Overview ContentThis is the overview tab content with general information.

html

<Tabs 
    v-model="activeTab" 
    :tabs="basicTabs"
>
    <div v-if="activeTab === 'overview'" class="p-4">
        <Text text="Overview Content" :weight="TextWeights.MEDIUM" class="mb-2" />
        <Text text="This is the overview tab content with general information." />
    </div>
    <div v-else-if="activeTab === 'details'" class="p-4">
        <Text text="Details Content" :weight="TextWeights.MEDIUM" class="mb-2" />
        <Text text="This tab contains detailed information and specifications." />
    </div>
    <div v-else-if="activeTab === 'settings'" class="p-4">
        <Text text="Settings Content" :weight="TextWeights.MEDIUM" class="mb-2" />
        <Text text="Configure your preferences and options here." />
    </div>
</Tabs>

typescript

<script setup lang="ts">
import { TextWeights } from '#core-types/components/presentational/text'

const activeTab = ref('overview')

const basicTabs = ref([
    { key: 'overview', label: 'Overview', icon: 'solar:eye-bold' },
    { key: 'details', label: 'Details', icon: 'solar:list-bold' },
    { key: 'settings', label: 'Settings', icon: 'solar:settings-bold' }
])
</script>

pages._explore.sections.complex-usage.title

Project Dashboard Tabs

Project Dashboard

Progress

75%

Completed

18 tasks

Remaining

6 tasks

Settings Panel (Vertical)

Profile Settings

Icon-Only Tabs

Home DashboardWelcome to your personalized dashboard.

html

<div class="space-y-8">
    <!-- Standard Tabs with Icons -->
    <div>
        <Text text="Project Dashboard Tabs" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-4" />
        <Tabs 
            v-model="projectTab" 
            :tabs="projectTabs"
            :tabs-font-size="14"
            :tabs-font-weight="500"
        >
            <div v-if="projectTab === 'dashboard'" class="p-6">
                <Text text="Project Dashboard" :weight="TextWeights.BOLD" class="mb-4" />
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="p-4 bg-blue-50 rounded-lg">
                        <div class="flex items-center gap-2 mb-2">
                            <Icon name="solar:chart-bold" :color="IconColors.PRIMARY" />
                            <Text text="Progress" :weight="TextWeights.MEDIUM" />
                        </div>
                        <Text text="75%" :size="TextSizes.XL" :weight="TextWeights.BOLD" />
                    </div>
                    <div class="p-4 bg-green-50 rounded-lg">
                        <div class="flex items-center gap-2 mb-2">
                            <Icon name="solar:check-circle-bold" :color="IconColors.SUCCESS" />
                            <Text text="Completed" :weight="TextWeights.MEDIUM" />
                        </div>
                        <Text text="18 tasks" :size="TextSizes.XL" :weight="TextWeights.BOLD" />
                    </div>
                    <div class="p-4 bg-orange-50 rounded-lg">
                        <div class="flex items-center gap-2 mb-2">
                            <Icon name="solar:clock-circle-bold" :color="IconColors.WARNING" />
                            <Text text="Remaining" :weight="TextWeights.MEDIUM" />
                        </div>
                        <Text text="6 tasks" :size="TextSizes.XL" :weight="TextWeights.BOLD" />
                    </div>
                </div>
            </div>
            <div v-else-if="projectTab === 'tasks'" class="p-6">
                <Text text="Task Management" :weight="TextWeights.BOLD" class="mb-4" />
                <Table :data="taskData" :columns="taskColumns" />
            </div>
            <div v-else-if="projectTab === 'team'" class="p-6">
                <Text text="Team Members" :weight="TextWeights.BOLD" class="mb-4" />
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div v-for="member in teamMembers" :key="member.id" class="p-4 border rounded-lg">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
                                <Icon name="solar:user-bold" :color="IconColors.MUTED" />
                            </div>
                            <div>
                                <Text :text="member.name" :weight="TextWeights.MEDIUM" />
                                <Text :text="member.role" :size="TextSizes.SM" :color="TextColors.MUTED" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="projectTab === 'files'" class="p-6">
                <Text text="Project Files" :weight="TextWeights.BOLD" class="mb-4" />
                <div class="space-y-3">
                    <div v-for="file in projectFiles" :key="file.name" class="flex items-center justify-between p-3 border rounded">
                        <div class="flex items-center gap-3">
                            <Icon :name="file.icon" :color="file.color" />
                            <div>
                                <Text :text="file.name" :weight="TextWeights.MEDIUM" />
                                <Text :text="file.size" :size="TextSizes.SM" :color="TextColors.MUTED" />
                            </div>
                        </div>
                        <BaseButton text="Download" :color="BaseButtonColors.SURFACE_RAISED" />
                    </div>
                </div>
            </div>
        </Tabs>
    </div>

    <!-- Vertical Tabs -->
    <div>
        <Text text="Settings Panel (Vertical)" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-4" />
        <Tabs 
            v-model="settingsTab" 
            :tabs="settingsTabs"
            :vertical-tabs="true"
            :tabs-width="200"
            :tabs-font-size="13"
        >
            <div v-if="settingsTab === 'profile'" class="p-6">
                <Text text="Profile Settings" :weight="TextWeights.BOLD" class="mb-4" />
                <div class="space-y-4 max-w-md">
                    <Input v-model="profileForm.name" label="Full Name" />
                    <Input v-model="profileForm.email" label="Email" type="email" />
                    <Textarea v-model="profileForm.bio" label="Bio" />
                    <div class="flex gap-2">
                        <BaseButton text="Save Changes" :color="BaseButtonColors.PRIMARY" />
                        <BaseButton text="Cancel" :color="BaseButtonColors.SURFACE_RAISED" />
                    </div>
                </div>
            </div>
            <div v-else-if="settingsTab === 'notifications'" class="p-6">
                <Text text="Notification Preferences" :weight="TextWeights.BOLD" class="mb-4" />
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 border rounded">
                        <div>
                            <Text text="Email Notifications" :weight="TextWeights.MEDIUM" />
                            <Text text="Receive updates via email" :size="TextSizes.SM" :color="TextColors.MUTED" />
                        </div>
                        <Toggle v-model="notificationSettings.email" />
                    </div>
                    <div class="flex items-center justify-between p-3 border rounded">
                        <div>
                            <Text text="Push Notifications" :weight="TextWeights.MEDIUM" />
                            <Text text="Browser push notifications" :size="TextSizes.SM" :color="TextColors.MUTED" />
                        </div>
                        <Toggle v-model="notificationSettings.push" />
                    </div>
                    <div class="flex items-center justify-between p-3 border rounded">
                        <div>
                            <Text text="SMS Alerts" :weight="TextWeights.MEDIUM" />
                            <Text text="Important updates via SMS" :size="TextSizes.SM" :color="TextColors.MUTED" />
                        </div>
                        <Toggle v-model="notificationSettings.sms" />
                    </div>
                </div>
            </div>
            <div v-else-if="settingsTab === 'security'" class="p-6">
                <Text text="Security Settings" :weight="TextWeights.BOLD" class="mb-4" />
                <div class="space-y-4 max-w-md">
                    <Input type="password" label="Current Password" />
                    <Input type="password" label="New Password" />
                    <Input type="password" label="Confirm New Password" />
                    <div class="flex items-center gap-4 p-3 bg-yellow-50 rounded">
                        <Toggle v-model="securitySettings.twoFactor" />
                        <div>
                            <Text text="Two-Factor Authentication" :weight="TextWeights.MEDIUM" />
                            <Text text="Add extra security to your account" :size="TextSizes.SM" :color="TextColors.MUTED" />
                        </div>
                    </div>
                    <BaseButton text="Update Security" :color="BaseButtonColors.PRIMARY" />
                </div>
            </div>
            <div v-else-if="settingsTab === 'privacy'" class="p-6">
                <Text text="Privacy Controls" :weight="TextWeights.BOLD" class="mb-4" />
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 border rounded">
                        <div>
                            <Text text="Profile Visibility" :weight="TextWeights.MEDIUM" />
                            <Text text="Make your profile public" :size="TextSizes.SM" :color="TextColors.MUTED" />
                        </div>
                        <Toggle v-model="privacySettings.publicProfile" />
                    </div>
                    <div class="flex items-center justify-between p-3 border rounded">
                        <div>
                            <Text text="Activity Tracking" :weight="TextWeights.MEDIUM" />
                            <Text text="Allow usage analytics" :size="TextSizes.SM" :color="TextColors.MUTED" />
                        </div>
                        <Toggle v-model="privacySettings.analytics" />
                    </div>
                    <div class="flex items-center justify-between p-3 border rounded">
                        <div>
                            <Text text="Data Export" :weight="TextWeights.MEDIUM" />
                            <Text text="Download your data" :size="TextSizes.SM" :color="TextColors.MUTED" />
                        </div>
                        <BaseButton text="Export" :color="BaseButtonColors.SURFACE_RAISED" />
                    </div>
                </div>
            </div>
        </Tabs>
    </div>

    <!-- Icon-Only Tabs -->
    <div>
        <Text text="Icon-Only Tabs" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-4" />
        <Tabs 
            v-model="iconTab" 
            :tabs="iconTabs"
            :tabs-icon-only="true"
            :tabs-icon-size="20"
        >
            <div v-if="iconTab === 'home'" class="p-6 text-center">
                <Icon name="solar:home-bold" :color="IconColors.PRIMARY" :size="IconSizes.XL2" class="mx-auto mb-4" />
                <Text text="Home Dashboard" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-2" />
                <Text text="Welcome to your personalized dashboard." :color="TextColors.MUTED" />
            </div>
            <div v-else-if="iconTab === 'search'" class="p-6 text-center">
                <Icon name="solar:magnifer-bold" :color="IconColors.PRIMARY" :size="IconSizes.XL2" class="mx-auto mb-4" />
                <Text text="Search" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-2" />
                <Input placeholder="Search for anything..." class="max-w-md mx-auto" />
            </div>
            <div v-else-if="iconTab === 'favorites'" class="p-6 text-center">
                <Icon name="solar:heart-bold" :color="IconColors.PRIMARY" :size="IconSizes.XL2" class="mx-auto mb-4" />
                <Text text="Favorites" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-2" />
                <Text text="Your saved and favorite items." :color="TextColors.MUTED" />
            </div>
            <div v-else-if="iconTab === 'settings'" class="p-6 text-center">
                <Icon name="solar:settings-bold" :color="IconColors.PRIMARY" :size="IconSizes.XL2" class="mx-auto mb-4" />
                <Text text="Settings" :weight="TextWeights.BOLD" :size="TextSizes.LG" class="mb-2" />
                <Text text="Manage your preferences and configuration." :color="TextColors.MUTED" />
            </div>
        </Tabs>
    </div>
</div>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
import { IconColors, IconSizes } from '#core-types/components/media/icon'
import { TextWeights, TextColors, TextSizes } from '#core-types/components/presentational/text'

const projectTab = ref('dashboard')
const settingsTab = ref('profile')
const iconTab = ref('home')

const projectTabs = ref([
    { key: 'dashboard', label: 'Dashboard', icon: 'solar:widget-bold', tooltip: 'Project overview and metrics' },
    { key: 'tasks', label: 'Tasks', icon: 'solar:checklist-bold', tooltip: 'Task management' },
    { key: 'team', label: 'Team', icon: 'solar:users-group-two-rounded-bold', tooltip: 'Team members' },
    { key: 'files', label: 'Files', icon: 'solar:folder-bold', tooltip: 'Project files and documents' }
])

const settingsTabs = ref([
    { key: 'profile', label: 'Profile', icon: 'solar:user-bold' },
    { key: 'notifications', label: 'Notifications', icon: 'solar:bell-bold' },
    { key: 'security', label: 'Security', icon: 'solar:shield-user-bold' },
    { key: 'privacy', label: 'Privacy', icon: 'solar:eye-closed-bold' }
])

const iconTabs = ref([
    { key: 'home', label: 'Home', icon: 'solar:home-bold', tooltip: 'Home Dashboard' },
    { key: 'search', label: 'Search', icon: 'solar:magnifer-bold', tooltip: 'Search Everything' },
    { key: 'favorites', label: 'Favorites', icon: 'solar:heart-bold', tooltip: 'Your Favorites' },
    { key: 'settings', label: 'Settings', icon: 'solar:settings-bold', tooltip: 'Preferences' }
])

const taskData = ref([
    { task: 'Design Homepage', assignee: 'Alice', status: 'In Progress', due: '2024-01-20' },
    { task: 'API Integration', assignee: 'Bob', status: 'Complete', due: '2024-01-18' },
    { task: 'Testing Phase', assignee: 'Carol', status: 'Pending', due: '2024-01-25' }
])

const taskColumns = ref([
    { key: 'task', label: 'Task' },
    { key: 'assignee', label: 'Assignee' },
    { key: 'status', label: 'Status' },
    { key: 'due', label: 'Due Date' }
])

const teamMembers = ref([
    { id: 1, name: 'Alice Johnson', role: 'Project Manager' },
    { id: 2, name: 'Bob Smith', role: 'Frontend Developer' },
    { id: 3, name: 'Carol Davis', role: 'Backend Developer' },
    { id: 4, name: 'David Wilson', role: 'UI/UX Designer' }
])

const projectFiles = ref([
    { name: 'Design System.figma', size: '2.4 MB', icon: 'solar:palette-bold', color: IconColors.PRIMARY },
    { name: 'Requirements.pdf', size: '856 KB', icon: 'solar:document-text-bold', color: IconColors.ERROR },
    { name: 'Database Schema.sql', size: '124 KB', icon: 'solar:database-bold', color: IconColors.SUCCESS }
])

const profileForm = ref({
    name: 'John Doe',
    email: 'john@example.com',
    bio: 'Software developer with expertise in Vue.js'
})

const notificationSettings = ref({
    email: true,
    push: false,
    sms: false
})

const securitySettings = ref({
    twoFactor: false
})

const privacySettings = ref({
    publicProfile: true,
    analytics: false
})
</script>

pages._explore.sections.props.title

Prop	Default	Type
tabs	[]	Tab[]
modelValue	undefined	string \| undefined
verticalTabs	undefined	boolean
tabsWidth	undefined	number
tabsFontSize	undefined	number
tabsFontWeight	undefined	number
tabsIconSize	undefined	number
tabsIconOnly	undefined	boolean
tabsSeparators	undefined	number[]
contentClasses	undefined	string

pages._explore.sections.types.title

Name	Type	Options
TabsProps	interface	Main props interface for Tabs component
Tab	interface	Individual tab configuration with key, label, icon, tooltip

pages._explore.sections.slots.title

Slot	Type
default	Tab content to be displayed when tab is active

pages._explore.sections.emits.title

Event	Type
update:modelValue