57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<v-layout>
|
|
<v-flex xs12 text-xs-center mb-2>
|
|
<v-card color="blue lighten-4">
|
|
<v-card-text class="pb-0 pt-1">
|
|
<v-btn
|
|
v-for="tab in tabs"
|
|
:color="tab.code == active ? 'white' : 'grey lighten-5'"
|
|
class="white--text ma-0 tab-btn"
|
|
:class="[tab.code == active ? 'active' : '']"
|
|
@click="changeTab(tab.code)"
|
|
flat
|
|
:key="tab.code"
|
|
:data="tab"
|
|
>
|
|
<!-- <v-icon left dark>{{ tab.icon }}</v-icon> -->
|
|
<h6 class="title">{{ tab.label }}</h6>
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.active {
|
|
border-bottom: solid 3px #ffeb3b!important;
|
|
}
|
|
|
|
.tab-btn {
|
|
min-width: 400px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data () {
|
|
return {
|
|
tabs : [
|
|
{"label":"SETTING", "icon":"opacity", "code":"01"},
|
|
{"label":"NUMBERING", "icon":"verified_user", "code":"02"}
|
|
],
|
|
|
|
active : "01"
|
|
}
|
|
},
|
|
|
|
methods : {
|
|
changeTab (x) {
|
|
this.active = x;
|
|
this.$store.commit('change_tab', x);
|
|
}
|
|
}
|
|
}
|
|
</script>
|