UI Development
Tabs
<CTabs /> Set up the tabs
Tab 1 content
<template>
<CTabs :tabs="tabs">
<template #tab1>
Content 1
</template>
<template #tab2>
Content 2
</template>
<!-- ... -->
</CTabs>
</template>
<script setup lang="ts">
const tabs = [
{
label: 'Tab 1',
icon: 'i-lucide-clipboard-pen',
slot: 'tab1',
},
{
label: 'Tab 2',
icon: 'i-lucide-download',
slot: 'tab2',
},
//...
]
</script> Variant
variant can be default or segmented
Tab 1 content
<template>
<CTabs :tabs="tabs" variant="segmented">
<template #tab1>
Content 1
</template>
<template #tab2>
Content 2
</template>
<!-- ... -->
</CTabs>
</template>
<script setup lang="ts">
const tabs = [
{
label: 'Tab 1',
icon: 'i-lucide-clipboard-pen',
slot: 'tab1',
},
{
label: 'Tab 2',
icon: 'i-lucide-download',
slot: 'tab2',
},
//...
]
</script> Position
Position can be left
Tab 1 content
Tab 1 content
<template>
<CTabs left :tabs="tabs">
<template #tab1>
Content 1
</template>
<template #tab2>
Content 2
</template>
<!-- ... -->
</CTabs>
</template>
<script setup lang="ts">
const tabs = [
{
label: 'Tab 1',
icon: 'i-lucide-clipboard-pen',
slot: 'tab1',
},
{
label: 'Tab 2',
icon: 'i-lucide-download',
slot: 'tab2',
},
//...
]
</script> Width
Tab width can be full
Tab 1 content
Tab 1 content
<template>
<CTabs full :tabs="tabs">
<template #tab1>
Content 1
</template>
<template #tab2>
Content 2
</template>
<!-- ... -->
</CTabs>
</template>
<script setup lang="ts">
const tabs = [
{
label: 'Tab 1',
icon: 'i-lucide-clipboard-pen',
slot: 'tab1',
},
{
label: 'Tab 2',
icon: 'i-lucide-download',
slot: 'tab2',
},
//...
]
</script> Title
Use the title prop to set the title
Tab with title
Tab 1 content
Segmented with title
Tab 1 content
<template>
<CTabs title="Tab with title" :tabs="tabs">
<template #tab1>
Content 1
</template>
<template #tab2>
Content 2
</template>
<!-- ... -->
</CTabs>
</template>
<script setup lang="ts">
const tabs = [
{
label: 'Tab 1',
icon: 'i-lucide-clipboard-pen',
slot: 'tab1',
},
{
label: 'Tab 2',
icon: 'i-lucide-download',
slot: 'tab2',
},
//...
]
</script> Slot
Use the slot to add additional components
Segmented with Search Input
Tab 1 content
<template>
<CTabs title="Segmented with Search Input" :tabs="tabs" variant="segmented">
<div class="grid grid-cols-1 w-2/3">
<UInput
icon="i-heroicons-magnifying-glass-20-solid"
size="sm"
color="white"
:trailing="false"
placeholder="Search..."
/>
</div>
<template #tab1>
Content 1
</template>
<template #tab2>
Content 2
</template>
<!-- ... -->
</CTabs>
</template>
<script setup lang="ts">
const tabs = [
{
label: 'Tab 1',
icon: 'i-lucide-clipboard-pen',
slot: 'tab1',
},
{
label: 'Tab 2',
icon: 'i-lucide-download',
slot: 'tab2',
},
//...
]
</script>© 2025 Application Name. All Rights Reserved.