Antd固定标签页在Header位置并将标签页内容渲染到Content中 _编程开发

Antd固定标签页在Header位置并将标签页内容渲染到Content中

创始人

2024-11-07 16:00:38

0次

可以使用Antd中的Layout组件构建页面布局，并将Tabs和要展示的内容放置在Header和Content中。

示例代码如下：

import { Layout, Tabs } from 'antd';
const { Header, Content } = Layout;
const { TabPane } = Tabs;

function App() {
  return (
    
      
        
          
            Content of Tab Pane 1
          
          
            Content of Tab Pane 2
          
          
            Content of Tab Pane 3
          
        
      
      
        Content of Tab Pane 1
      
    
  );
}

export default App;

在上面的示例代码中，我们使用了Layout组件来构建页面布局，并将Tabs放置在Header中，将要展示的内容放置在Content中。每个TabPane中可以通过标签页内容来展示不同的内容，这里我们只是简单地展示了相同的内容，你可以将它们替换为任何你需要的内容。

上一篇：Antd官网的中英文切换实现的是什么技术？需要哪些前置条件？

下一篇：Antd过滤器无法正常工作，客户端代码被执行但没有进行过滤。

Antd固定标签页在Header位置并将标签页内容渲染到Content中

相关内容

热门资讯