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="selectedTitle = 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
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: () => ({
|
||
|
|
selectedIndex: 0,
|
||
|
|
tabs: []
|
||
|
|
}),
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</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>
|