官方文档 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. spark2.0 DataSet操作的一些问题记录

    随着新版本的Spark已经逐渐稳定,最近拟将原有框架升级到spark 2.0.还是比较兴奋的,特别是SQL的速度真的快了许多.. 然而,在其中一个操作时却卡住了.主要是dataframe.map操作, ...

  2. 复选框已经有checked,但是页面没有选中效果（解决）

    原代码: $("#checked").click(function(){ $(".input[name="checked"]").attr( ...

  3. 2.1 使用JAXP 对 xml文档进行DOM解析

    //使用 jaxp 对xml文档进行dom解析 public class Demo2 { //必要步骤 @Test public void test() throws Exception { //1. ...

  4. InnoDB意向锁的作用

    https://www.zhihu.com/question/51513268?sort=created IX,IS是表级锁,不会和行级的X,S锁发生冲突.只会和表级的X,S发生冲突. 意向锁是一种快 ...

  5. debian设置limits.conf

    最近已经把自己的游戏框架主要功能完成得差不多了,决定将自己的开发环境从debian7升级到debian9,不然太多第三方依赖都跟不上了.debian10刚出来,MongoDB还没适配,所以暂不考虑. ...

  6. MySQL备份--xtrabackup与mysqldump工具使用

    MySQL备份----xtrabackup与mysqldump工具的使用 一.Xtrabackup8.0: 一个用于MySQL数据库物理热备的备份工具,支持MySQL.Percona server和M ...

  7. VTORRAAYY ws+tls+nginx config

    # nginx conf partal location /haha { proxy_redirect off; # the prot should same with config v2*** pr ...

  8. 02_ Flume的安装部署及其简单使用

    一.Flume的安装部署: Flume的安装非常简单,只需要解压即可,当然,前提是已有hadoop环境 安装包的下载地址为:http://www-us.apache.org/dist/flume/1. ...

  9. Tomcat下配置JNDI的三种方式

    最近在整理项目上的配置文件,正好看到了数据源配置,想着配置方式有多种,便趁热打铁,记录下常规的Tomcat配置数据源的方式 1.单个工程配置 找到Tomcat下的server.xml文件,在Conte ...

  10. linux 没有界面内容显示不全解决办法

    1.管道 管道简单理解就是,使用管道意味着第一个命令的输出会作为第二个命令的输入,第二个命令的输出又会作为第三个命令的输入,依此类推.利用Linux所提供的管道符“|”将两个命令隔开,管道符左边命令的 ...