官方文档 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结构进行了梳理

代码目录

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

1、整体实现思路

col

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

row

  • 处理不同size下处理整行宽度
  • 处理间距gutter

2、css文件结构图

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

3、col中less实现逻辑图

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

 

 

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

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

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

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

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

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

 

相关文章:

  • 2021-10-06
  • 2021-12-26
  • 2022-12-23
  • 2021-12-30
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-10
猜你喜欢
  • 2021-05-15
  • 2021-07-14
  • 2022-12-23
  • 2021-07-17
相关资源
相似解决方案