adrema/resources/js/components/ui/Tabs.vue

24 lines
696 B
Vue

<template>
<div class="flex-none w-maxc flex flex-col justify-between border-b-2 group-[.is-popup]:border-zinc-500 mb-3">
<div class="flex space-x-1 px-2">
<a v-for="(item, index) in entries" :key="index" href="#" class="rounded-t-lg py-1 px-3 text-zinc-300"
:class="index === modelValue ? `group-[.is-popup]:bg-zinc-600` : ''" @click.prevent="openMenu(index)"
v-text="item.title"></a>
</div>
</div>
</template>
<script>
export default {
props: {
modelValue: {},
entries: {},
},
methods: {
openMenu(index) {
this.$emit('update:modelValue', index);
},
},
};
</script>