Ant Design入门之布局

布局

antd布局：https://ant.design/components/layout-cn/

在后台系统页面布局中，往往是经典的三部分布局，像这样：

下面，我们通过antd组件来完成这个布局。

组件概述 

Layout ：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
Header ：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Sider ：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Footer ：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

搭建整体框架

在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：

import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
    render(){
        return (
            <Layout>
            <Sider>Sider</Sider> 
            <Layout>
            <Header>Header</Header> 
            <Content>Content</Content> 
            <Footer>Footer</Footer> 
            </Layout> 
            </Layout> 
    );
}

需要特别说明的是，在umi中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件。

接下来，配置路由：（非必须） 

config.js文件：

export default {
    plugins: [
        ['umi‐plugin‐react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ],
    routes: [{
        path: '/',
        component: '../layouts' //配置布局路由
    }]
};

import React from 'react';
import { Layout, Menu, Icon } from 'antd';
import Link from 'umi/link';

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

class BasicLayout extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            collapsed: false,
        }
    }

    render(){
        return (
            <Layout>
            <Sider width={256} style={{minHeight: '100vh', color: 'white'}}>
    <div style={{ height: '32px', background: 'rgba(255,255,255,.2)', margin: '16px'}}/>
        <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        inlineCollapsed={this.state.collapsed}
    >
    <SubMenu key="sub1" title={<span><Icon type="user"/><span>用户管理</span></span>}>
    <Menu.Item key="1"><Link to="/user/UserAdd">新增用户</Link></Menu.Item>
        <Menu.Item key="2"><Link to="/user/UserList">新增列表</Link></Menu.Item>
        </SubMenu>
        </Menu>
        </Sider>
        <Layout>
        <Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
        <Content style={{ margin: '24px 16px 0' }}>
    <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
        {this.props.children}
    </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>后台系统 ©2018 Created by 中国深圳</Footer>
        </Layout>
        </Layout>
    )
    }

}

export default BasicLayout;