快速学习Ant Design-布局
2.3、布局
antd布局：https://ant.design/components/layout-cn/ 在后台系统页面布局中，往往是经典的三部分布局，像这样：
在这里插入图片描述
下面，我们通过antd组件来完成这个布局。
2.3.1、组件概述
- Layout：布局容器，其下可嵌套 Header/Sider/Content/Footer或Layout本身，可以放在任何父容器中。
- Header ：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
- Sider ：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout 中。
- Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
- Footer: 底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
2.3.2、搭建整体框架
在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：
在这里插入图片描述
需要特别说明的是，在umi中约定的目录结构中，layouts/index.js文件将被作为全 局的布局文件。
接下来，配置路由：（非必须）
config.js文件：
export default {
plugins: [
['umi‐plugin‐react', {
dva: true, // 开启dva功能
antd: true // 开启Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts' //配置布局路由
}]
};进行页面访问：
在这里插入图片描述
可以看到，布局已经生成，只是样式优点丑。
2.3.3、子页面使用布局
前面所定义的布局是全局布局，那么，在子页面中如何使用这个全局布局呢？
首先，需要在布局文件中，将Content内容替换成{this.props.children}，意思是引入传递的内容。
在这里插入图片描述
接下来配置路由（注意，在布局路由下面进行配置）：
说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不采用umi默认的路由方式。
export default {
plugins: [
['umi‐plugin‐react', {
dva: true, // 开启dva功能
antd: true // 开启Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts', //配置布局路由routes: [ //在这里进行配置子页面
{
path: '/myTabs',
component: './myTabs'
}
]
}]
};进行访问测试：
在这里插入图片描述
可以看到，在MyTabs组件中已经应用了全局的布局。其他子页面也就同理了。
2.3.4、美化页面
接下来，对页面做一些美化的工作：
import React from 'react'
import {
Layout
} from 'antd';
const {
Header,
Footer,
Sider,
Content
} = Layout;
class BasicLayout extends React.Component {
render() {
return ( <
Layout >
<
Sider width = {
256
}
style = {
{
minHeight: '100vh',
color:
'white'
}
} >
Sider <
/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;效果
在这里插入图片描述
2.3.5、引入导航条
使用Menu组件作为导航条：https://ant.design/components/menu-cn/
import React from 'react'
import {
Layout,
Menu,
Icon
} from 'antd';
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 = {
['2']
}
defaultOpenKeys = {
['sub1']
}
mode = "inline"
theme = "dark"
inlineCollapsed = {
this.state.collapsed
} >
<
Menu.Item key = "1" >
<
Icon type = "pie‐chart" / >
<
span > Option 1 < /span> <
/Menu.Item> <
Menu.Item key = "2" >
<
Icon type = "desktop" / >
<
span > Option 2 < /span> <
/Menu.Item> <
Menu.Item key = "3" >
<
Icon type = "inbox" / >
<
span > Option 3 < /span></Menu.Item >
<
SubMenu key = "sub1"
title = { < span > < Icon type = "mail" / > < span > Navigation One < /span></span >
} >
<
Menu.Item key = "5" > Option 5 < /Menu.Item> <
Menu.Item key = "6" > Option 6 < /Menu.Item> <
Menu.Item key = "7" > Option 7 < /Menu.Item> <
Menu.Item key = "8" > Option 8 < /Menu.Item> <
/SubMenu> <
SubMenu key = "sub2"
title = { < span > < Icon type = "appstore" / > < span > Navigation Two < /span></span >
} >
<
Menu.Item key = "9" > Option 9 < /Menu.Item> <
Menu.Item key = "10" > Option 10 < /Menu.Item> <
SubMenu key = "sub3"
title = "Submenu" >
<
Menu.Item key = "11" > Option 11 < /Menu.Item> <
Menu.Item key = "12" > Option 12 < /Menu.Item> <
/SubMenu> <
/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;效果：
在这里插入图片描述
2.3.6、为导航添加链接
下面，我们对左侧的导航条添加链接，点击相应的链接在右侧进行相应页面的显示。
在src目录下创建user目录，并且在user目录下创建UserAdd.js和UserList.js文件，用于 模拟实现新增用户和查询用户列表功能。
在这里插入图片描述
UserAdd.js
在这里插入图片描述
UserList.js：
在这里插入图片描述
接下来，配置路由：
export default {
plugins: [
['umi‐plugin‐react', {
dva: true, // 开启dva功能
antd: true // 开启Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts', //配置布局路由routes: [
{
path: '/myTabs',
component: './myTabs'
},
{
path: '/user',
routes: [{
path: '/user/list',
component: './user/UserList'
},
{
path: '/user/add',
component: './user/UserAdd'
}
]
}
]
}]
};为菜单添加链接：
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/list" > 用户列表 < /Link> <
/Menu.Item> <
Menu.Item key = "2" >
<
Link to = "/user/add" > 新增用户 < /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;注意：这里使用了umi的link标签，目的是出现记录点击的菜单。
测试：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/01/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
