56 lines
1018 B
Vue
56 lines
1018 B
Vue
<template>
|
|
<div class="tabs">
|
|
<div class="tabbar">
|
|
<div
|
|
class="tab"
|
|
:class="{active: selectedTab === tab.key}"
|
|
v-for="tab in tabs" @click="selectedTab = tab.key"
|
|
>
|
|
{{ tab.label }}
|
|
</div>
|
|
</div>
|
|
<div v-for="slot, name in slots" v-show="selectedTab === name">
|
|
<slot :name="name"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue';
|
|
|
|
const props = defineProps<{
|
|
tabs: {label: string, key: string}[]
|
|
}>()
|
|
|
|
const slots = defineSlots<{
|
|
slotName: string,
|
|
Id: string,
|
|
}>()
|
|
|
|
console.log(slots)
|
|
|
|
const selectedTab = ref(props.tabs?.[0]?.key);
|
|
|
|
</script>
|
|
<style>
|
|
|
|
@scope(.tabs) {
|
|
.tabbar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0 0.5rem;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
.tab {
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border:1px solid white;
|
|
border-bottom: none;
|
|
border-radius: 5px 5px 0 0;
|
|
|
|
&.active {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
</style> |