一、概述

  参看地址:https://pro.ant.design/docs/layout-cn

  其实在上述地址ant-design上已经有详细介绍,本文知识简述概要。

  页面整体布局是一个产品最外层的框架结构,往往会包含导航、页脚、侧边栏、通知栏以及内容等。在页面之中,也有很多区块的布局结构。Ant Design 目前提供了两套布局方案:Layout 和 Grid 。

二、布局

2.1、根据不同场景区分抽离布局组件

  在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通用的导航、侧边栏、顶部通知、页面标题等元素。例如 Ant Design Pro 的 BasicLayout

  通常,我们会把抽象出来的布局组件,放到跟 routes、 components 平行的 layouts 文件夹中方便管理。需要注意的是,这些布局组件和我们平时使用的其它组件并没有什么不同,只不过功能性上是为了处理布局问题。

2.2、处理 this.props.children 属性

  在抽离的过程中,往往需要处理布局包含的内容组件,而 this.props.children 就代表了标签中的内容,如果你需要对其子元素进行筛选处理,可以使用 React.children.forEach 方法。

2.3、Ant Design Pro 的布局

在 Ant Design Pro 中,我们抽离了使用过程中的通用布局,都放在 layouts 目录中,分别为:

  BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏:

  BlankLayout:空白的布局、

  PageHeaderLayout:带有标准 PageHeader 的布局

  UserLayout:抽离出用于登陆注册页面的通用布局

2.4、如何使用 Ant Design Pro 布局

  我们为了统一方便的管理路由和页面的关系,将配置信息统一抽离到 src/common/router.js 下,同时应用动态路由,通过如下配置:

const routerConfig = {
'/': {
component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
},
'/dashboard/analysis': {
component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
},
'/user': {
component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
},
'/user/login': {
component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),
},
};

映射路由和页面布局(组件)的关系。详细的映射转换实现,参看 router.js

ant design pro(二)布局的更多相关文章

  1. ant design pro (十二)advanced UI 测试

    一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...

  2. (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建

    首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...

  3. ant design pro (六)样式

    一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Desig ...

  4. ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  5. Ant Design Pro (中后台系统)教程

    一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs ...

  6. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  7. ant design pro (十五)advanced 使用 API 文档工具

    一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...

  8. ant design pro (十四)advanced 使用 CLI 工具

    一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提 ...

  9. ant design pro (十三)advanced 错误处理

    一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...

随机推荐

  1. AtcoderGrandContest 005 F. Many Easy Problems

    $ >AtcoderGrandContest \space 005 F.  Many Easy Problems<$ 题目大意 : 有一棵大小为 \(n\) 的树,对于每一个 \(k \i ...

  2. 51nod 1412 AVL树的种类

    非常简单的一道题,一眼题 枚举左儿子大小,再枚举深度即可 复杂度$O(n^2 log n)$ #include <cstdio> #include <cstring> #inc ...

  3. [BZOJ1559][JSOI2009]密码(AC自动机)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1559 2009年的省选题虽然比起现在简单了不少,但对我来说还是很有挑战性的. 首先对于这种多串匹配问 ...

  4. django基础入门

    1. http协议 1.1 请求协议 请求协议格式: 请求首行: // 请求方式 请求路径 协议和版本,例如:GET /index.html HTTP/1.1 请求头信息: // 请求头名称:请求头内 ...

  5. (转) 基于MapReduce的ItemBase推荐算法的共现矩阵实现(一)

    转自:http://zengzhaozheng.blog.51cto.com/8219051/1557054 一.概述 这2个月为公司数据挖掘系统做一些根据用户标签情况对用户的相似度进行评估,其中涉及 ...

  6. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  7. 62.COUNT(递归算法)--数的划分变式题型

    文件名:count.cpp 输入输出文件:count.in.count.out 时空:64M,2s 我们已经知道这样一个定理:任意一个正整数能够分解成最多4个数字的平方和.现在给你一些数字,要你求出它 ...

  8. 关于orcad元件库

    ORCAD CAPTURE 零件库解析 ORCAD CAPTURE 零件库解析 1' AMPLIFIER.OLB 共182个零件,存放模拟放大器IC,如CA3280,TL027C,EL4093等. 2 ...

  9. /dev/fb0入门练习

    转:http://hi.baidu.com/fsx92/item/bdbf90d8adab409f260ae738 大家都知道Unix/Linux系统是由命令驱动的.那么最基本的系统是命令行的(就是想 ...

  10. 根据url下载图片和页面

    需要将&tp=webp&wxfrom=5去掉,既可以在任何地方显示,也可以下载了 http://mmbiz.qpic.cn/mmbiz_jpg/bf8pC39RBhGFOH1ib9Ac ...