官方文档 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. VirtualBox使用

    热键:Right Ctrl 串口 端口编号: COM1 -> /dev/ttyS0 COM2 -> /dev/ttyS1 COM3 -> /dev/ttyS2 COM4 -> ...

  2. go语言入门（10）并发编程

    1,概述 1.1并发和并行 并行(parallel):指在同一时刻,有多条指令在多个处理器上同时执行. 并发(concurrency):指在同一时刻只能有一条指令执行,但多个进程指令被快速的轮换执行, ...

  3. 后台程序员简单应用前端的bootstrap(小白)

    原因: 现在技术更新很快,我们需要掌握更多的语言和技术,公司现在也希望招全栈工程师. 名词: bootstrap(前端框架),less(css的扩充) 案例: 在bootstrap中常用row行级元素 ...

  4. explicit和implicit

    explicit是C++中的一个关键字,只用于修饰只有一个参数的构造函数: class A{ explicit A(const T obj); }; 该关键字告诉编译器该类只能显式的转换,不能隐式(i ...

  5. 十七，k8s集群指标API及自定义API

    目录 资源指标: Metrics-Server 资源指标: Metric-Server介绍 Metric-Server部署 下载yaml文件 因为有墙, 所以提前下载image镜像, 当然也可以手动修 ...

  6. 蓝桥杯BASIC-13 数列排序

    问题描述 给定一个长度为n的数列,将这个数列按从小到大的顺序排列.1<=n<=200 输入格式 第一行为一个整数n. 第二行包含n个整数,为待排序的数,每个整数的绝对值小于10000. 输 ...

  7. Web SQL与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  8. 洛谷P1020 导弹拦截【单调栈】

    题目:https://www.luogu.org/problemnew/show/P1020 题意: 给定一些导弹的高度. 一个导弹系统只能拦截高度不增的一系列导弹,问如果只有一个系统最多能拦截多少导 ...

  9. [Docker] Run a command inside Docker container

    For example you are working in a backend project, you have setup Dockerfile: FROM node:10.16.0-stret ...

  10. 布尔（boolean）代数趣味学习法

    今天,我想出来一个学习布尔(boolean)代数的趣味方法: 比如:逻辑与(&)运算 逻辑里面就是并且形象的理解就是:从卧室里面外出,必须 卧室的门打开 “并且” 最外面的门打开,才能出去.用 ...