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

antd源码分析之——栅格（Grid）的更多相关文章

  1. antd源码分析之——标签页（tabs 2.Tabs关键组件功能实现）

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第二部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  2. antd源码分析之——折叠面板（collapse）

    官方文档 https://ant.design/components/collapse-cn/ 目录 一.antd中的collapse 代码目录 1.组件结构图(♦♦♦重要) 2.源码节选:antd/ ...

  3. antd源码分析之——对话框（modal）

    目录 一.组件结构 1.antd代码结构 2.rc-ant代码结构 3.组件结构 二.antd组件调用关系及功能详解 1.Model.tsx 2.confirm 三.rc-dialog详解 1.e.t ...

  4. antd源码分析之——标签页（tabs 3.Tabs的滚动效果）

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第三部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  5. antd源码分析之——标签页（tabs 1.组件结构）

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第一部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  6. bootstrap_栅格系统_响应式工具_源码分析

    -----------------------------------------------------------------------------margin 为负 ​使盒子重叠 ​等高 等高 ...

  7. ANTD mobile源码分析 -- popover

    最近的开发中要用到很多的各式各样的组件.但是发现ant design mobile(后面简称ANTDM)里很多的资源.于是就分析一下,学习学习. ANTDM直接使用了typescript,没有用ES2 ...

  8. Bootstrap源码分析系列之整体架构

    作为一名合格的前端工程师,你肯定听说过Bootstarp框架.确实可以说Bootstrap框架是最流行的前端框架之一.可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端 ...

  9. 【JUC】JDK1.8源码分析之LockSupport（一）

    一.前言 最开始打算分析ReentrantLock,但是分析到最后,发现离不开LockSuport的支持,所以,索性就先开始分析LockSupport,因为它是锁中的基础,是一个提供锁机制的工具类,所 ...

随机推荐

  1. 10 TCP限流技术

    TCP限流是因为让接收方充分接受完消息,保证数据安全,不会丢失 一.窗口机制介绍 发送端和接收端都拥有一个窗口,当发送端发送数据时,落进窗口的数据被发送,当接受端接受数据时,落进接收端窗口的数据将会被 ...

  2. 禁止Steam VR随着虚幻4自动启动

    1.禁止启动UE4的时候启动修改这个文件Program Files\Epic Games\XXXX\Engine\Plugins\Runtime\Steam\SteamVR\SteamVR.uplug ...

  3. Java秒杀实战 （七）安全优化

    转自:https://blog.csdn.net/qq_41305266/article/details/81174782 一.隐藏秒杀地址 思路:秒杀开始前,先去请求接口获取秒杀地址 1.接口改造, ...

  4. Java中接口是否可以继承多个接口？

    可以. 接口是常量值和方法定义的集合.接口是一种特殊的抽象类. java类是单继承的.classB Extends classA java接口可以多继承.Interface3 Extends Inte ...

  5. Image Processing and Analysis_8_Edge Detection：Multiresolution edge detection techniques ——1995

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  6. 【异常】Cannot run program "git" (in directory "/mnt/software/azkaban-3.79.0"): error=2, No such file or directory

    1 安装azkaban异常 cloudera-scm@cdh4 azkaban-3.79.0]$ ./gradlew build -x test Parallel execution with con ...

  7. GOLANG接口编程的最佳实践一 （sort.Sort(data Interface ) ）

    package main import( "fmt" "sort" "math/rand" ) //定义一个武当派的结构体 type Wud ...

  8. 作业九——DFA最小化

    1.将DFA最小化:教材P65 第9题 I {1, 2, 3, 4, 5} {6, 7} {1, 2}b->{1, 2, 3, 4, 5} {3, 4}b->{6, 7} {5}b-> ...

  9. IDEA常见问题和设置

    1.查看方法的文档:快捷键 Ctrl-Q(Ctrl-J(mac)) 2.历史记录 3.IDEA控制台输出中文乱码问题 4.修改Idea默认的maven等全局设置 5.idea 启动时报错javax.i ...

  10. Python将HTML转换为PDF

    Python将HTML转换为PDF 使用pdfkit库和wkhtmltopdf, pip install pdfkit wkhtmltopdflinux中一般需要添加sudo权限. Windows安装 ...