Ant Design前端学习笔记之二——Layout 布局

本篇在上一篇的基础上进行页面布局的实践，将默认首页替换成一个有布局的页面。

我们知道首页指向哪里是从index.tsx文件里定义的。在上一篇搭建环境之后，在首页自定一个了一个div，添加了一个button。现在我们把这里进行修改，指向带有布局的一个页面。

首先，我们先对代码目录进行初步优化，新建一个src/view目录，用于存放所有的自定义页面。在view下新建一个main文件夹，用于存放首页文件。在main文件夹下新建两个文件：

MainPage.tsx:

import './MainPage.css'

import { Layout, Menu, Breadcrumb } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

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

class MainPage extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed: any) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              Option 1
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              Option 2
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />}>
              Files
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              Bill is a cat.
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default MainPage;

MainPage.css:

#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layou
t .site-layout-background {
  background: #fff;
}

注：以上代码均copy自官方demo，如果想选择不同的页面布局，可以自行查找或修改。

接下来，我们修改index.tsx文件，把首页指向MainPage：

index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // import App from './App'; import MainPage from './views/main/MainPage'; import reportWebVitals from './reportWebVitals';

import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import MainPage from './views/main/MainPage';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <MainPage />
  </React.StrictMode>,
  document.getElementById('root')
);

本地启动：

访问http://localhost:3000 一个有布局的页面出现了：

后续我们就可以对此页面进行美化，并进行单页应用开发了。