Add an option for a custom tab-head

bootstrap-vue · Apr 5, 2017 · eb14903 · eb14903
1 parent 01545b4
commit eb14903
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/lib/components/tab.vue b/lib/components/tab.vue
@@ -1,11 +1,12 @@
 <template>
     <transition enter-to-class="show" leave-class="show" @after-enter="afterEnter" mode="out-in">
-        <div role="tabpanel" class="tab-pane"
+        <div role="tabpanel"
+             class="tab-pane"
              :class="[{fade, disabled, active: localActive}]"
-             v-if="localActive || !lazy" v-show="localActive || lazy"
-        ref="panel"
-   >
-       <slot></slot>
+             v-if="localActive || !lazy"
+             v-show="localActive || lazy"
+             ref="panel">
+             <slot></slot>
         </div>
     </transition>
 </template>
@@ -33,6 +34,10 @@
                 type: String,
                 default: ''
             },
+            headHtml: {
+                type: String,
+                default: null
+            },
             disabled: {
                 type: Boolean,
                 default: false

diff --git a/lib/components/tabs.vue b/lib/components/tabs.vue
@@ -6,8 +6,11 @@
                     <a :class="['nav-link',{small: small, active: tab.localActive, disabled: tab.disabled}]"
                        :href="tab.href"
                        @click.prevent.stop="setTab(index)"
-                       v-html="tab.title"
-                    ></a>
+                       v-if="!tab.headHtml"
+                       >{{ tab.title }}</a>
+                    <div :class="['tab-head',{small: small, active: tab.localActive, disabled: tab.disabled}]"
+                         v-else
+                         v-html="tab.headHtml"></div>
                 </li>
                 <slot name="tabs"></slot>
             </ul>