From 28773634897799cd980ce2ca7e63aa39b270d83e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 23 Jun 2021 16:38:29 +0800
Subject: [PATCH] feat(Tabs): add nav-bottom slot (#8915)

---
 src/tab/README.md                               | 13 +++++++------
 src/tab/README.zh-CN.md                         |  9 +++++----
 src/tab/test/__snapshots__/insert.spec.tsx.snap | 16 ++++++++++++++++
 src/tab/test/insert.spec.tsx                    | 11 +++++++++++
 src/tabs/Tabs.tsx                               |  3 ++-
 5 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/tab/README.md b/src/tab/README.md
index a2e857123..43896cede 100644
--- a/src/tab/README.md
+++ b/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
 
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index e4b7f62c9..c9d9cbe40 100644
--- a/src/tab/README.zh-CN.md
+++ b/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
 
diff --git a/src/tab/test/__snapshots__/insert.spec.tsx.snap b/src/tab/test/__snapshots__/insert.spec.tsx.snap
index 99f8b48e8..7db9f17e9 100644
--- a/src/tab/test/__snapshots__/insert.spec.tsx.snap
+++ b/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>
+`;
diff --git a/src/tab/test/insert.spec.tsx b/src/tab/test/insert.spec.tsx
index f1ad9071f..8e4adbacf 100644
--- a/src/tab/test/insert.spec.tsx
+++ b/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();
+});
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
index 2be3a5798..4702d5012 100644
--- a/src/tabs/Tabs.tsx
+++ b/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}