bootstrap-vue · Istador · Mar 8, 2021 · Mar 8, 2021 · Mar 8, 2021 · Mar 8, 2021
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
@@ -572,4 +572,28 @@ It is recommended to use the `disabled` attribute on the `<b-tab>` component ins
 <!-- b-tabs-dynamic.vue -->
 ```
 
+### Card title using tabs-before slot
+
+```html
+<template>
+  <div>
+    <b-card no-body>
+      <b-tabs card>
+        <template #tabs-before>
+          <b-card-title>Card Title</b-card-title>
+        </template>
+        <b-tab title="Tab 1">
+          Tab contents 1
+        </b-tab>
+        <b-tab title="Tab 2">
+          Tab contents 1
+        </b-tab>
+      </b-tabs>
+    </b-card>
+  </div>
+</template>
+
+<!-- b-tabs-card-title.vue -->
+```
+
 <!-- Component reference added automatically from component package.json -->
diff --git a/src/components/tabs/package.json b/src/components/tabs/package.json
@@ -141,6 +141,14 @@
             "name": "empty",
             "description": "Renders this slot if no tabs are present"
           },
+          {
+            "name": "tabs-after",
+            "description": "Content to place after the content tab buttons"
+          },
+          {
+            "name": "tabs-before",
+            "description": "Content to place before the content tab buttons"
+          },
           {
             "name": "tabs-end",
             "description": "Additional tab buttons without tab content placed after content tab buttons"

diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -27,6 +27,8 @@ import {
 } from '../../constants/props'
 import {
   SLOT_NAME_EMPTY,
+  SLOT_NAME_TABS_AFTER,
+  SLOT_NAME_TABS_BEFORE,
   SLOT_NAME_TABS_END,
   SLOT_NAME_TABS_START,
   SLOT_NAME_TITLE
@@ -635,7 +637,11 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
         ],
         key: 'bv-tabs-nav'
       },
-      [$nav]
+      [
+        this.normalizeSlot(SLOT_NAME_TABS_BEFORE) || h(),
+        $nav,
+        this.normalizeSlot(SLOT_NAME_TABS_AFTER) || h()
+      ]
     )
 
     const $children = this.normalizeSlot() || []

diff --git a/src/components/tabs/tabs.spec.js b/src/components/tabs/tabs.spec.js
@@ -687,6 +687,60 @@ describe('tabs', () => {
     wrapper.destroy()
   })
 
+  it('tabs-before slot is injected at the right place', async () => {
+    const wrapper = mount(BTabs, {
+      slots: {
+        default: [BTab, BTab],
+        'tabs-before': '<span class="test-tabs-before">foobar</span>'
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAllComponents(BTab).length).toBe(2)
+
+    // check existance
+    const spans = wrapper.findAll('span.test-tabs-before')
+    expect(spans).toBeDefined()
+    expect(spans.length).toBe(1)
+    expect(spans.at(0).text()).toBe('foobar')
+
+    // check order
+    const childs = wrapper.findAll('div.tabs > div:first-of-type > *')
+    expect(childs.length).toBe(2)
+    expect(childs.at(0).classes().length).toBe(1)
+    expect(childs.at(0).classes()).toContain('test-tabs-before')
+    expect(childs.at(0).text()).toBe('foobar')
+    expect(childs.at(1).classes().length).toBe(2)
+    expect(childs.at(1).classes()).toContain('nav')
+    expect(childs.at(1).classes()).toContain('nav-tabs')
+  })
+
+  it('tabs-after slot is injected at the right place', async () => {
+    const wrapper = mount(BTabs, {
+      slots: {
+        default: [BTab, BTab],
+        'tabs-after': '<span class="test-tabs-after">foobar</span>'
+      }
+    })
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAllComponents(BTab).length).toBe(2)
+
+    // check existance
+    const spans = wrapper.findAll('span.test-tabs-after')
+    expect(spans).toBeDefined()
+    expect(spans.length).toBe(1)
+    expect(spans.at(0).text()).toBe('foobar')
+
+    // check order
+    const childs = wrapper.findAll('div.tabs > div:first-of-type > *')
+    expect(childs.length).toBe(2)
+    expect(childs.at(0).classes().length).toBe(2)
+    expect(childs.at(0).classes()).toContain('nav')
+    expect(childs.at(0).classes()).toContain('nav-tabs')
+    expect(childs.at(1).classes().length).toBe(1)
+    expect(childs.at(1).classes()).toContain('test-tabs-after')
+    expect(childs.at(1).text()).toBe('foobar')
+  })
+
   it('"active-nav-item-class" is applied to active nav item', async () => {
     const activeNavItemClass = 'text-success'
     const App = {

diff --git a/src/constants/slots.js b/src/constants/slots.js
@@ -54,6 +54,8 @@ export const SLOT_NAME_ROW_DETAILS = 'row-details'
 export const SLOT_NAME_TABLE_BUSY = 'table-busy'
 export const SLOT_NAME_TABLE_CAPTION = 'table-caption'
 export const SLOT_NAME_TABLE_COLGROUP = 'table-colgroup'
+export const SLOT_NAME_TABS_AFTER = 'tabs-after'
+export const SLOT_NAME_TABS_BEFORE = 'tabs-before'
 export const SLOT_NAME_TABS_END = 'tabs-end'
 export const SLOT_NAME_TABS_START = 'tabs-start'
 export const SLOT_NAME_TEXT = 'text'