ant design pro(二)布局
一、概述
参看地址: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。
转载于:https://www.cnblogs.com/crazycode2/p/10041724.html
ant design pro(二)布局相关推荐
- 【Ant Design Pro 二】 创建页面,组件,并在页面调用
开发交流qq群 173683895 路由里面的参数作用介绍: {path: "/a_nowdayserver/nowdayserver", //随便取名,显示在访问路径url中 ...
- Ant Design Pro入门
目录 一:了解Ant Design Pro 二:快速入门 一:了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中 ...
- Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
- 前端UI框架Ant Design Pro
一直忙于工作,也没时间总结.现在有点零散时间把之前做的笔记整理一下. 目前项目使用的技术栈是,前端UI框架Ant Design Pro,数据交互使用react,后端使用的是springcloud,离线 ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...
- Ant Design Pro(5)-3.UI配置
Ant Design Pro中的UI配置 UI配置 1.布局样式 layout 插件 与pro-layout 配置的配置形同. 推荐先使用 Pro 站点 的右侧抽屉来帮助你完成布局相关的整体风格.主题 ...
- Ant Design Pro -- 02项目结构@20210331
一.项目的目录结构 ├── config # umi 配置,包含路由,构建等配置 ├── docker # 部署 ├── functions # ├── mock # 本地模拟数据 ├── publi ...
- 同志们,免费版的Ant Design Pro Vue3 来啦
Vue3也出了一段时间了,于是照着ant pro vue搭个免费的vue3版 希望大家喜欢 基于 Vite2 Vue3 Ant-Design-of-Vue2 TS实现的 Ant Design Pro ...
- ant design pro安装
一.过程安装 其中安装成功后出现404参考 第二个大导航 所有都需要安装最新版本的 包括装node(node 10.13.0,自带npm 版本6.4.1 ).yarn. 和 git(建议最新版本,否 ...
最新文章
- SAP销售发票同步产生会计凭证的两种做法
- 【Python】字典哈希表按键(key)值(value)顺序和逆序输出
- JVM源码阅读-本地库加载流程和原理
- C语言选择排序Selection sort算法(附完整源码)
- timerfd API使用总结
- 【计算机网络】电路交换网络中,每条电路独占其经过的物理链路?
- LeetCode OJ - Reorder List
- Node.js Unix/Linux NVM
- 迷你KMS mini-KMS_Activator_v1.3_Office2010_VL_ENG使用
- Wp8开发环境搭建总结
- 《人性的弱点》-[美]戴尔·卡耐基
- 刘强东的敌与友:嘲讽王健林一亿小目标,性侵案后李国庆说该原谅
- 山经·南山经:堂庭山
- 微信小程序激活账号时,提示“此帐号已激活,请使用帐号密码直接登录”
- jmetter持续时间_【转】Jmeter做web压力测试时设置持续时间注意点
- CSAPP LAB Binary bombs实验报告
- 首次使用Neptune3000海底静力触探CPT记录
- 计算机dvd打不开,我的电脑DVD打不开。怎么办?
- 爱帮网CEO刘建国:垂直化是搜索发展的趋势
- (B站动力节点老杜MySQL教程)MySQL课堂笔记-day02.txt