Skip to content

Commit

Permalink
feat(tabs): add dt-tabs-nav-no-gap classname to clear gap (#559)
Browse files Browse the repository at this point in the history
  • Loading branch information
LuckyFBB authored Mar 26, 2024
1 parent 4e0f633 commit 1e37966
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 1 deletion.
52 changes: 52 additions & 0 deletions components/tab/demo/no-gap.md
Original file line number Diff line number Diff line change
@@ -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);
```
3 changes: 2 additions & 1 deletion components/tab/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | 基础样式 |
|.dt-tabs-nav-padding-16 | 增加左右边距16px | 基础样式 |
|.dt-tabs-nav-no-margin | 减少上边距/左边距16px,整体宽度增加32px | 消除间隙 |
13 changes: 13 additions & 0 deletions theme/dt-theme/default/tab.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

0 comments on commit 1e37966

Please sign in to comment.