showing results for - "b tabs beautiful tabs in vue"
Nohlan
19 Apr 2016
1<template>
2  <div>
3    <b-card no-body>
4      <b-tabs v-model="tabIndex" card>
5        <b-tab title="Tab 1" :title-link-class="linkClass(0)">Tab contents 1</b-tab>
6        <b-tab title="Tab 2" :title-link-class="linkClass(1)">Tab contents 2</b-tab>
7        <b-tab title="Tab 3" :title-link-class="linkClass(2)">Tab contents 3</b-tab>
8      </b-tabs>
9    </b-card>
10  </div>
11</template>
12
13<script>
14  export default {
15    data() {
16      return {
17        tabIndex: 0
18      }
19    },
20    methods: {
21      linkClass(idx) {
22        if (this.tabIndex === idx) {
23          return ['bg-primary', 'text-light']
24        } else {
25          return ['bg-light', 'text-info']
26        }
27      }
28    }
29  }
30</script>