style: #563 tabs

DTStack · Apr 30, 2024 · da5be0c · da5be0c
1 parent 8ee045b
commit da5be0c
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 7 deletions.
diff --git a/components/tab/demo/card.md b/components/tab/demo/card.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 卡片式页签
   en-US: Card type tab

diff --git a/components/tab/demo/editable-card.md b/components/tab/demo/editable-card.md
@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 title:
   zh-CN: 新增和关闭页签
 ---

diff --git a/components/tab/demo/light.md b/components/tab/demo/light.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 浅色背景下使用
 ---

diff --git a/components/tab/demo/sider-menu.md b/components/tab/demo/sider-menu.md
@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 title:
   zh-CN: 侧边菜单
 ---

diff --git a/components/tab/demo/slide-vertical.md b/components/tab/demo/slide-vertical.md
@@ -0,0 +1,43 @@
+---
+order: 4
+title:
+  zh-CN: 左侧使用
+  en-US: SlideLeft
+---
+
+## zh-CN
+
+可以使用 `dt-tabs-hidden-more-icon` 隐藏数量较多时左下角或右上角的 `···` icon
+
+## en-US
+
+You can use 'dt-tabs-hidden-more-icon' to hide the more icon in the bottom left or top right corner when there is a large quantity.
+
+```jsx
+import { Tabs, Radio } from 'antd';
+import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
+
+const { TabPane } = Tabs;
+
+class SlidingTabsDemo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <Tabs className="dt-tabs-hidden-more-icon" defaultActiveKey="1" tabPosition="left" style={{ height: 220 }}>
+          {[...Array(30).keys()].map(i => (
+            <TabPane tab={ i < 4 ? <span><AndroidOutlined />Tab-{i}</span> : `Tab-${i}`} key={i}>
+              Content of tab {i}
+            </TabPane>
+          ))}
+        </Tabs>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<SlidingTabsDemo />, mountNode);
+```
diff --git a/components/tab/index.zh-CN.md b/components/tab/index.zh-CN.md
@@ -25,4 +25,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  | 基础样式 |
-|.dt-tabs-nav-no-margin | 减少上边距/左边距16px，整体宽度增加32px | 消除间隙 |
+|.dt-tabs-nav-no-margin | 减少上边距/左边距16px，整体宽度增加32px | 消除间隙 |
+|.dt-tabs-hidden-more-icon | 更多标签时，隐藏 ··· 的更多 icon | 侧边菜单 |
diff --git a/theme/dt-theme/default/tab.less b/theme/dt-theme/default/tab.less
@@ -9,7 +9,7 @@
             line-height: 20px;
             .ant-tabs-tab-btn {
                 .anticon {
-                    margin-right: 4px;
+                    margin: 0 4px 0 -4px;
                     font-size: 16px;
                     color: @black_pageMsg;
                 }
@@ -119,7 +119,8 @@
     .ant-tabs-nav-wrap-ping-bottom {
         .ant-tabs-nav-list {
             .ant-tabs-tab {
-                padding: 8px 12px;
+                padding: 2px 12px;
+                margin: 6px 0;
             }
         }
     }
@@ -203,6 +204,12 @@
     }
 }
 
+.dt-tabs-hidden-more-icon {
+    .ant-tabs-nav-more {
+        display: none;
+    }
+}
+
 .ant-tabs-right.dt-tabs-sider-menu {
     .ant-tabs-nav {
         .ant-tabs-tab-active {