|
1 | 1 | <template>
|
2 |
| - <div :class="vertical ? 'c-row c-no-gutters': ''"> |
3 |
| - <div :class="[addNavWrapperClasses, gridClasses.navs]"> |
4 |
| - <ul :class="[navClasses, addNavClasses, { 'c-h-100': vertical }]"> |
| 2 | + <div :class="tabsClasses"> |
| 3 | + <div :class="navWrapperClasses"> |
| 4 | + <ul :class="navClasses"> |
5 | 5 | <CTabNav
|
6 | 6 | v-for="(tab, key) in ctabInstances"
|
7 | 7 | @click.native="tabClick(tab)"
|
@@ -67,15 +67,25 @@ export default {
|
67 | 67 | }
|
68 | 68 | },
|
69 | 69 | computed: {
|
| 70 | + tabsClasses () { |
| 71 | + return { 'c-row c-no-gutters': this.vertical } |
| 72 | + }, |
| 73 | + navWrapperClasses () { |
| 74 | + return [ this.addNavWrapperClasses, this.gridClasses.navs] |
| 75 | + }, |
70 | 76 | navClasses () {
|
71 |
| - return { |
72 |
| - 'c-nav' : true, |
73 |
| - 'c-nav-tabs': this.tabs && !this.pills, |
74 |
| - 'c-nav-pills': this.pills, |
75 |
| - 'c-flex-column': this.vertical, |
76 |
| - 'c-nav-fill': this.fill, |
77 |
| - 'c-nav-justified': this.justified |
78 |
| - } |
| 77 | + return [ |
| 78 | + this.addNavClasses, |
| 79 | + { |
| 80 | + 'c-nav' : true, |
| 81 | + 'c-nav-tabs': this.tabs && !this.pills, |
| 82 | + 'c-nav-pills': this.pills, |
| 83 | + 'c-flex-column': this.vertical, |
| 84 | + 'c-nav-fill': this.fill, |
| 85 | + 'c-nav-justified': this.justified, |
| 86 | + 'c-h-100': this.vertical |
| 87 | + } |
| 88 | + ] |
79 | 89 | },
|
80 | 90 | activeTab () {
|
81 | 91 | return this.activatedTab || this.ctabInstances.filter(el => el.active)[0]
|
@@ -113,7 +123,7 @@ export default {
|
113 | 123 | }
|
114 | 124 | </script>
|
115 | 125 |
|
116 |
| -<style scoped lang="scss"> |
| 126 | +<style lang="scss"> |
117 | 127 | .fade-enter-active, .fade-leave-active {
|
118 | 128 | transition: opacity .3s;
|
119 | 129 | }
|
|
0 commit comments