antd a-tabs吸顶设置
时间: 2023-11-14 13:15:57 浏览: 183
react-antd-multi-tabs-admin:ts+react+antd-多页签后台模板(纯净版,非 antd pro!)
可以通过设置 `affix` 属性来实现 antd 的 Tabs 组件吸顶效果。具体步骤如下:
1. 引入 `Affix` 组件:
```jsx
import { Affix } from 'antd';
```
2. 在 `Tabs` 组件外层包裹一个 `Affix` 组件,并设置 `offsetTop` 属性用于控制吸顶的位置:
```jsx
<Affix offsetTop={0}>
<Tabs>
{/* Tabs 的内容 */}
</Tabs>
</Affix>
```
其中,`offsetTop` 属性的值为吸顶时距离顶部的距离,这里设置为 `0` 表示紧贴顶部。
3. 根据需要设置 `Affix` 组件的其他属性,例如 `style` 和 `className` 等。
完整示例代码如下:
```jsx
import { Affix, Tabs } from 'antd';
function MyTabs() {
return (
<Affix offsetTop={0}>
<Tabs>
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Affix>
);
}
```
阅读全文