79 lines
1.2 KiB
Vue
79 lines
1.2 KiB
Vue
<template lang="html">
|
|
<div class="tabs">
|
|
<ul class="tabs-header">
|
|
<li
|
|
v-for="title in tabTitles"
|
|
:key="title"
|
|
:class="{ selected: title === selectedTitle }"
|
|
class="btn"
|
|
@click="handleClick(title)"
|
|
>
|
|
{{ title }}
|
|
</li>
|
|
</ul>
|
|
<slot/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, provide } from 'vue'
|
|
|
|
export default {
|
|
name: 'TabsGroup',
|
|
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 lang="scss">
|
|
|
|
@import "~styles/app.scss";
|
|
.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: #2e2e2e;
|
|
border-radius: 5px;
|
|
color: #999999;
|
|
cursor: pointer;
|
|
transition: 0.4s all ease-out;
|
|
}
|
|
|
|
.tabs-header li.selected {
|
|
background-color: $primary;
|
|
color: $jet-black;
|
|
}
|
|
|
|
.tabs-header li.selected:hover {
|
|
/*border-color: $body-color; */
|
|
}
|
|
|
|
</style>
|