antd源码分析之——栅格（Grid）
2024-09-04 21:02:04
官方文档 https://ant.design/components/grid-cn/
目录
一、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
最新文章
- delphi 取cpu号
- python SMTP邮件发送（转载）
- Android Virtual Device（AVD）屏幕大小调整
- No Suitable Driver Found For Jdbc_我的解决方法
- C#委托详解（2）：实现方式大全
- 【leetcode】Divide Two Integers （middle）☆
- sql restore mode
- Ubuntu11.10与r8168网卡不兼容导致网络时断时续的问题
- 修改session的存储机制
- BZOJ 1834: [ZJOI2010]network 网络扩容（网络流+费用流）
- Finding distance between two curves
- 快速搭建MySQL复制集
- jquery validate 动态增加删除验证规则（转载）
- echarts词云引用
- logging模块（二十六）
- 【Ray Tracing The Next Week 超详解】 光线追踪2-9
- vs2008快捷键
- day24类的继承
- 【Socket】Socket网络编程常用的结构及函数小结
- 《JavaScript》数组Array