71 lines
1.1 KiB
Vue
71 lines
1.1 KiB
Vue
<template lang="html">
|
|
<div class="tabs">
|
|
<ul class="tabs-header">
|
|
<li
|
|
v-for="title in tabTitles"
|
|
:key="title"
|
|
:class="{ selected: title === selectedTitle }"
|
|
@click="handleClick(title)"
|
|
>
|
|
{{ title }}
|
|
</li>
|
|
</ul>
|
|
<slot/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, provide } from 'vue'
|
|
|
|
export default {
|
|
name: 'TabWrapper',
|
|
setup(props, { slots }) {
|
|
const tabTitles = ref(slots.default()
|
|
.map((tab) => tab.props.title))
|
|
const selectedTitle = ref(tabTitles.value[0])
|
|
|
|
provide('selectedTitle', selectedTitle)
|
|
return {
|
|
selectedTitle,
|
|
tabTitles
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(title) {
|
|
this.selectedTitle = title
|
|
this.$emit('tabActivated', title)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tabs {
|
|
width: auto;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tabs-header {
|
|
margin-bottom: 10px;
|
|
list-style: none;
|
|
display: flex;
|
|
}
|
|
|
|
.tabs-header li {
|
|
width: 140px;
|
|
text-align: center;
|
|
padding: 10px 20px;
|
|
margin-right: 10px;
|
|
background-color: #ddd;
|
|
border-radius: 5px;
|
|
color: black;
|
|
cursor: pointer;
|
|
transition: 0.4s all ease-out;
|
|
}
|
|
|
|
.tabs-header li.selected {
|
|
background-color: #0984e3;
|
|
color: white;
|
|
}
|
|
</style>
|