66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<div class="block">
|
|
<div class="tabs is-boxed" id="tabs">
|
|
<ul class="has-bottom-line">
|
|
<li v-for="(tab, index) in tabs" class="is-size-6"
|
|
:key="index"
|
|
:id="tab.id + '-tab'"
|
|
:class="{'is-active': tab.id === tabActiva}">
|
|
<a @click="setTabActiva(tab.id)">
|
|
<span>
|
|
{{ tab.nombre }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabActiva: "pedidos",
|
|
tabs: [
|
|
{
|
|
id: "pedidos",
|
|
nombre: "Pedidos"
|
|
},
|
|
{
|
|
id: "bonos",
|
|
nombre: "Bonos"
|
|
},
|
|
{
|
|
id: "caracteristicas",
|
|
nombre: "Caracteristicas opcionales"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
setTabActiva(tabId) {
|
|
this.$parent.setSeccionActiva(tabId);
|
|
this.tabActiva = tabId
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../../../node_modules/bulma';
|
|
hr {
|
|
border: none;
|
|
height: 1px;
|
|
}
|
|
.has-bottom-line {
|
|
border-bottom-color: #dbdbdb !important;
|
|
border-bottom-style: solid !important;
|
|
border-bottom-width: 1px !important;
|
|
}
|
|
.tabs li.is-active a {
|
|
border-bottom-color: #e3342f;
|
|
color: #e3342f;
|
|
}
|
|
</style>
|