38 lines
1.3 KiB
Vue
38 lines
1.3 KiB
Vue
<script setup>
|
|
import { provide, ref, useSlots } from 'vue';
|
|
|
|
defineProps({
|
|
selectedColor: {
|
|
type: String,
|
|
default: 'blue-600'
|
|
}
|
|
});
|
|
|
|
const slots = useSlots();
|
|
const tabs = ref(slots.default().map((tab) => tab.props ));
|
|
const selected = ref(tabs.value[0].name);
|
|
|
|
provide('selected', selected);
|
|
|
|
</script>
|
|
<template>
|
|
<div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
|
|
<ul class="flex flex-wrap -mb-px">
|
|
<li class="me-2" v-for="tab in tabs" :key="tab.name">
|
|
<button
|
|
@click="selected = tab.name"
|
|
class="inline-block p-4"
|
|
:class="{
|
|
['border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300']: tab.name !== selected,
|
|
[`text-${ selectedColor } border-b-2 border-${ selectedColor } rounded-t-lg active dark:text-blue-500 dark:border-${ selectedColor }`]: tab.name === selected
|
|
}"
|
|
>
|
|
{{ tab.title }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="default-tab-content">
|
|
<slot />
|
|
</div>
|
|
</template> |