官方文檔 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結構進行了梳理
代碼目錄
1、整體實作思路
col
- less負責生成 ant-col-1 到 ant-col-24 的樣式
- 元件tsx中負責根據父元件傳入的props屬性,生成自己使用的class名稱
row
- 處理不同size下處理整行寬度
- 處理間距gutter
2、css檔案結構圖
3、col中less實作邏輯圖