antd中Layout使用

Ant Design的Layout组件提供了基础的页面布局，包括头部、侧边栏、底部、内容区域等。以下是一个简单的使用Ant Design的Layout组件的示例：

import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

function MyLayout() {
  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
          <Menu.Item key="1">nav 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-content">Content</div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  );
}

export default MyLayout;

在这个示例中，我们使用了Layout、Header、Content和Footer组件来创建了一个基本的页面布局。在Header组件中，我们添加了一个Logo和一个菜单，而在Content组件中，我们添加了一个面包屑导航和内容区域。在Footer组件中，我们添加了版权信息。此外，你还可以使用Sider组件来添加侧边栏。

希望这个示例能够帮助你了解如何使用Ant Design的Layout组件。