官方文档 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. 设置自己的bat运行文件-自己用，随时扩展

    start "" "E:\SEST_H5" start "" "C:\Program Files\Sublime Text 3\s ...

  2. 解释mysql 语句

    一.在我们创建mysql数据库的时候我们经常会用到这句SQL: CREATE DATABASE TEST DEFAULT CHARACTER SET utf8 COLLATE utf8_general ...

  3. 2.03_01_Python网络爬虫urllib2库

    一:urllib2库的基本使用 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中抓取出来.在Python中有很多库可以用来抓取网页,我们先学习urllib2. urllib2 是 Python ...

  4. Linux Centos虚拟机扩容

    Linux Centos虚拟机扩容(/dev/mapper/centos-root) 1:.首先查看我们的根分区大小是多少 df -h 文件系统 类型 容量 已用 可用 已用% 挂载点``/dev/m ...

  5. java——多线程并发库

    JDK5中增加了Doug Lea的并发库,这一引进给Java线程的管理和使用提供了强大的便利性. java.util.current包中提供了对线程优化.管理的各项操作,使得线程的使用变得的心应手.该 ...

  6. npm 安装指定版本的包

    使用 包名@版本号 指定, 例如,安装 Express 3.21.2, $ npm

  7. 使用Xcode Instruments定位APP稳定性问题

    Xcode Instruments提供了各种各样的工具用来定位APP的各种稳定性问题.这里简单总结几个问题: 1. 内存泄漏 Xcode->Open Developer Tools->In ...

  8. Centos6.5 下安装配置Apache+PHP+Mysql环境

    1.准备工作 # yum -y update && yum -y install vim make cmake gcc gcc-c++ bison bison-devel ncurse ...

  9. vue项目环境的搭建

    首先要明白Vue是基于node的,在公司要使用vue来开发项目的话肯定是要先安装node的,下面是搭建一个最简单的vue项目环境 一 安装node 这个可以去node的官网下载对应版本 安装好之后 c ...

  10. Codeforces Round #590 (Div. 3) C. Pipes

    链接: https://codeforces.com/contest/1234/problem/C 题意: You are given a system of pipes. It consists o ...