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 ( +
+ setClassName(checked ? 'dt-tabs-nav-no-gap' : '')} /> + 设置dt-tabs-nav-no-gap + + + Navigation One + + + Navigation Two + + +
+ + + 内容 1 + + + 内容 2 + + +
+
+ ); +} + +ReactDOM.render(, 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; + } + } +}