57 lines
1.3 KiB
Vue
57 lines
1.3 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 {
|
||
|
|
name: "PedidosAdminTabsSecciones",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabActiva: "pedidos",
|
||
|
|
tabs: [
|
||
|
|
{
|
||
|
|
id: "pedidos",
|
||
|
|
nombre: "Pedidos"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "bonos",
|
||
|
|
nombre: "Bonos"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setTabActiva(tabId) {
|
||
|
|
this.$parent.setSeccionActiva(tabId);
|
||
|
|
this.tabActiva = tabId
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
hr {
|
||
|
|
border: none;
|
||
|
|
height: 1px;
|
||
|
|
}
|
||
|
|
.has-bottom-line {
|
||
|
|
border-bottom-color: #dbdbdb !important;
|
||
|
|
border-bottom-style: solid !important;
|
||
|
|
border-bottom-width: 1px !important;
|
||
|
|
}
|
||
|
|
</style>
|