Files
ui/docs/components/content/examples/TabsExampleIconSlot.vue
2024-09-23 10:54:53 +02:00

24 lines
666 B
Vue

<script setup lang="ts">
const items = [{
label: 'Getting Started',
icon: 'i-heroicons-information-circle',
content: 'This is the content shown for Tab1'
}, {
label: 'Installation',
icon: 'i-heroicons-arrow-down-tray',
content: 'And, this is the content for Tab2'
}, {
label: 'Theming',
icon: 'i-heroicons-eye-dropper',
content: 'Finally, this is the content for Tab3'
}]
</script>
<template>
<UTabs :items="items" class="w-full">
<template #icon="{ item, selected }">
<UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0 me-2" :class="[selected && 'text-primary-500 dark:text-primary-400']" />
</template>
</UTabs>
</template>