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