40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<template>
|
|
<div :class="divClasses">
|
|
<ul :class="ulClasses">
|
|
<li class="mr-2">
|
|
<a href="#" aria-current="page"
|
|
class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500">Profile</a>
|
|
</li>
|
|
<li class="mr-2">
|
|
<a href="#"
|
|
class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</a>
|
|
</li>
|
|
<li class="mr-2">
|
|
<a href="#"
|
|
class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</a>
|
|
</li>
|
|
<li class="mr-2">
|
|
<a href="#"
|
|
class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Contacts</a>
|
|
</li>
|
|
<li>
|
|
<a class="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useTabsClasses } from './useTabsClasses'
|
|
import type { PropType } from 'vue'
|
|
|
|
export type TabsVariant = 'default' | 'underline' | 'pills'
|
|
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String as PropType<TabsVariant>,
|
|
default: 'default',
|
|
},
|
|
})
|
|
|
|
const { ulClasses, divClasses } = useTabsClasses(props)
|
|
</script> |