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

 

一、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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM