天天看點

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

官方文檔 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

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)