From 1e37966fb1a698843ab9ab157a4606d92f278e0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9C=9C=E5=BA=8F?= <976060700@qq.com>
Date: Tue, 26 Mar 2024 14:28:10 +0800
Subject: [PATCH] feat(tabs): add dt-tabs-nav-no-gap classname to clear gap
 (#559)

---
 components/tab/demo/no-gap.md   | 52 +++++++++++++++++++++++++++++++++
 components/tab/index.zh-CN.md   |  3 +-
 theme/dt-theme/default/tab.less | 13 +++++++++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 components/tab/demo/no-gap.md

diff --git a/components/tab/demo/no-gap.md b/components/tab/demo/no-gap.md
new file mode 100644
index 00000000..95ff418f
--- /dev/null
+++ b/components/tab/demo/no-gap.md
@@ -0,0 +1,52 @@
+---
+order: 3
+title:
+  zh-CN: 消除间隙
+  en-US: no gap
+---
+
+## zh-CN
+
+需要将 tabs 和导航栏拼接展示，不需要有间隙
+
+## en-US
+
+In order to fit in more tabs, they can slide left and right (or up and down).
+
+```jsx
+import { useState } from "react";
+import { Tabs, Space, Switch, Menu } from 'antd';
+
+const { TabPane } = Tabs;
+
+const TopTabsDemo = () => {
+  const [className, setClassName]= useState("");
+
+  return (
+    <div>
+      <Switch onChange={(checked) => setClassName(checked ? 'dt-tabs-nav-no-gap' : '')} />
+      <span>设置dt-tabs-nav-no-gap</span>
+      <Menu mode="horizontal" defaultSelectedKeys={['One']}>
+        <Menu.Item key="One">
+          Navigation One
+        </Menu.Item>
+        <Menu.Item key="Two">
+          Navigation Two
+        </Menu.Item>
+      </Menu>
+      <div style={{ background: '#F2F7FA', padding:16 }}>
+        <Tabs defaultActiveKey="1" className={className}>
+          <TabPane tab="项目 1" key="item-1">
+            内容 1
+          </TabPane>
+          <TabPane tab="项目 2" key="item-2">
+            内容 2
+          </TabPane>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.render(<TopTabsDemo />, mountNode);
+```
diff --git a/components/tab/index.zh-CN.md b/components/tab/index.zh-CN.md
index 50b2b2b7..d247b7c0 100644
--- a/components/tab/index.zh-CN.md
+++ b/components/tab/index.zh-CN.md
@@ -24,4 +24,5 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
 |---------|---------|---------|
 |.dt-tabs-sider-menu  | 侧边栏菜单类名，需配合type="line"和tabPosition="right"或者"left"一起使用   | 侧边菜单   |
 |.dt-tabs-content-padding  | 内容内边距类名，16px  | 侧边菜单 |
-|.dt-tabs-nav-padding-16  | 增加左右边距16px  | 基础样式 |
\ No newline at end of file
+|.dt-tabs-nav-padding-16  | 增加左右边距16px  | 基础样式 |
+|.dt-tabs-nav-no-margin | 减少上边距/左边距16px，整体宽度增加32px | 消除间隙 |
\ No newline at end of file
diff --git a/theme/dt-theme/default/tab.less b/theme/dt-theme/default/tab.less
index 51b32b14..fc2b2e27 100644
--- a/theme/dt-theme/default/tab.less
+++ b/theme/dt-theme/default/tab.less
@@ -252,3 +252,16 @@
         right: -16px;
     }
 }
+
+.dt-tabs-nav-no-gap {
+    .ant-tabs-nav {
+        width: calc(100% + 32px);
+        margin-top: -16px;
+        margin-left: -16px;
+        padding-left: 16px;
+        background-color: #FFF;
+        &::before {
+            border-bottom: none;
+        }
+    }
+}