您好,欢迎来到纷纭教育。
搜索
您的当前位置:首页antd源码分析之——栅格(Grid)

antd源码分析之——栅格(Grid)

来源:纷纭教育

官方文档 

 

一、antd中的Grid

  1、整体思路

  2、less文件结构图(♦♦♦重要)

  3、less实现逻辑图(♦♦♦重要)

  4、源码节选:antd/components/grid/style/mixin.less

  5、源码节选:antd/components/grid/col.tsx

 

一、antd中的Grid

Grid没有使用React 底层基础组件。Grid的特点在于css样式的控制,本次着重对css结构进行了梳理

代码目录

1、整体实现思路

col

  • less负责生成 ant-col-1 到 ant-col-24 的样式
  • 组件tsx中负责根据父组件传入的props属性,生成自己使用的class名称

row

  • 处理不同size下处理整行宽度
  • 处理间距gutter
2、css文件结构图

3、col中less实现逻辑图

 

 

 4、源码节选:antd/components/grid/style/mixin.less

 

 

 5、源码节选:antd/components/grid/col.tsx

 

 

转载于:https://www.cnblogs.com/zs-note/p/11365926.html

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- fenyunshixun.cn 版权所有 湘ICP备2023022495号-9

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务