feat(Tabs): add nav-bottom slot (#8915)

src/tab/README.md

@@ -21,7 +21,7 @@ app.use(Tabs);
 
 ### Basic Usage
 
-The first tab is actived by default, you can set `v-model:active` to active specified tab.
+The first tab is active by default, you can set `v-model:active` to active specified tab.
 
 ```html
 <van-tabs v-model:active="active">
@@ -174,7 +174,7 @@ Use `animated` props to change tabs with animation.
 
 ### Swipeable
 
-In swipeable mode, you can switch tabs with swipe gestrue in the content.
+In swipeable mode, you can switch tabs with swipe gesture in the content.
 
 ```html
 <van-tabs v-model:active="active" swipeable>
@@ -290,10 +290,11 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i
 
 ### Tabs Slots
 
-| Name      | Description              |
-| --------- | ------------------------ |
-| nav-left  | Custom nav left content  |
-| nav-right | Custom nav right content |
+| Name                | Description               |
+| ------------------- | ------------------------- |
+| nav-left            | Custom nav left content   |
+| nav-right           | Custom nav right content  |
+| nav-bottom `v3.1.1` | Custom nav bottom content |
 
 ### Tab Slots
 

src/tab/README.zh-CN.md

@@ -297,10 +297,11 @@ export default {
 
 ### Tabs Slots
 
-| 名称      | 说明         |
-| --------- | ------------ |
-| nav-left  | 标题左侧内容 |
-| nav-right | 标题右侧内容 |
+| 名称                | 说明           |
+| ------------------- | -------------- |
+| nav-left            | 标签栏左侧内容 |
+| nav-right           | 标签栏右侧内容 |
+| nav-bottom `v3.1.1` | 标签栏下方内容 |
 
 ### Tab Slots
 

src/tab/test/__snapshots__/insert.spec.tsx.snap

@@ -160,3 +160,19 @@ exports[`should render correctly after inserting a tab with name 1`] = `
   </div>
 </div>
 `;
+
+exports[`should render nav-bottom slot correctly 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap">
+    <div role="tablist"
+         class="van-tabs__nav van-tabs__nav--line"
+    >
+      <div class="van-tabs__line">
+      </div>
+    </div>
+  </div>
+  Nav Bottom
+  <div class="van-tabs__content">
+  </div>
+</div>
+`;

src/tab/test/insert.spec.tsx

@@ -86,3 +86,14 @@ test('should render Tab inside a component correctly', async () => {
   await later();
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render nav-bottom slot correctly', async () => {
+  const wrapper = mount(Tabs, {
+    slots: {
+      'nav-bottom': () => 'Nav Bottom',
+    },
+  });
+
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/tabs/Tabs.tsx

@@ -463,9 +463,10 @@ export default defineComponent({
             onScroll={onStickyScroll}
           >
             {renderHeader()}
+            {slots['nav-bottom']?.()}
           </Sticky>
         ) : (
-          renderHeader()
+          [renderHeader(), slots['nav-bottom']?.()]
         )}
         <TabsContent
           count={children.length}