Ant Design Pro 入门学习笔记
1.目录结构
2.开发流程示意图
菜单配置文件ant-design-pro\src\layouts\BasicLayout.js
路由配置文件ant-design-pro\src\pages\.umi\router.js
ant.design的栅格系统
在 ant.design 中,对于栅格系统的设计和bootstrap中的设计是极其类似的,核心概念为: Row一定是最外层的, Col一定是分布在Row中的, 内容一定是在Col里的, 当然,在Col中我们还可以嵌套Row,在antd中, Col被分成了24分(与bootstrap的12份是类似的)。
在Col中,我们可以使用span={number}来制定一个Col的宽度,具体的做法是使用 百分比 来划分, 如 span={4} 的占满,那么每一份就是 16.6667% , 如果 span={12} 占满,那么每一份就是 50%。。。。 依次类推。
另外,在Col中我们还可以使用offset来进行便宜,正值为向右偏移,使用的原理是 margin-left 或者是 margin-right。
我们还可以在Row中设置 gutter={number } 这个值就是栅格的间距,具体实现原理就是对div根据百分比来划分,然后在div内容使用padding,这时content肯定是减小的。
除此之外,还可以在 Col 中设置 push={number} 以及 pull={number},实现原理也非常简单,就是使用元素的 position: relative;值,通过 left=百分比;以及right=百分比; 这样就可以实现pull 和 push 就可以了。
当然,我们还可以使用 Row 的flex进行布局,这种布局方式只需要在 Row 上设置 type="flex",就可以设置竖直和水平对齐方式了。
竖直对齐方式:
- align="top" 向上对齐
- align="middle" 中间对齐
- alegn="bottom" 向下对齐
水平对其方式:
- justify="start" 左对齐
- justify='end' 右对齐
- justify="center" 中间对齐
- justify='space-between' 中间
- jusify="space-around" 中间
这些flex布局的原理也很简单,就是直接使用css3的flex, 如align-items以及 justify-content。
另外, ant.design也是支持响应式布局的 。 和bootstrap一样。
注意点:
- 一般在我们制作表格的时候,可以使用 ant.design 的栅格系统,比如,左边是说明性文字,右边是选择项或者是input框。 整体使用flex布局即可。 左边的给一个固定的宽度,如span={4},右边的就是span={24}了, 并且在右边,如果是input框就比较好解决,如果是几个框,我们需要分开排列,就需要使用一个 <Row>,然后设置flex,其中justify应该是space-between,而能是start、end、center或者是 space-around。 因为对于 start、end、center,会使得几个框都会贴的很紧(除非是我们在其中再添加一个div,然后添加一个padding,这样才能做到分割),那么space-between和space-around的区别是什么?前者是两边贴近然后中间有空位置,而后者是两边的距离为中间padding的一般。