39 lines
1.1 KiB
Vue
39 lines
1.1 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">
|
|
<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': tab.name !== selected,
|
|
[`text-${selectedColor} border-b-2 border-${selectedColor} rounded-t-lg active`]: tab.name === selected
|
|
}"
|
|
>
|
|
{{ tab.title }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="default-tab-content">
|
|
<slot />
|
|
</div>
|
|
</template>
|