mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
30 lines
873 B
Vue
30 lines
873 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 #default="{ item, index, selected }">
|
|
<div class="flex items-center gap-2 relative truncate">
|
|
<UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
|
|
|
|
<span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
|
|
|
|
<span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
</template>
|