ant design_ant design vue - CSDN
精华内容
参与话题
  • AntDesign 实战教程 --------前言

    万次阅读 2019-03-14 14:31:17
    前言 开始学习 欢迎来到《Ant Design 实战教程》。...这是 Ant Design 组件库的官方教程,由 Ant Design 开发团队负责编写。不管你是刚刚接触前端开发的新手,还是已经从事实际开发、希望尝试 React 技术...

    前言

    开始学习

    欢迎来到《Ant Design 实战教程》。

     

    这本教程将从最简单的教起,让大家学会如何使用 Ant Design 组件库,然后逐渐深入,讲解如何开发一个包含多个复杂网页、用于实际生产的大型应用。

    这是 Ant Design 组件库的官方教程,由 Ant Design 开发团队负责编写。不管你是刚刚接触前端开发的新手,还是已经从事实际开发、希望尝试 React 技术栈的工程师,都是我们的目标读者。

    通过学习这门课程,我们希望帮助读者达到下面几个目标。

    • 掌握 React 技术栈
    • 掌握 Ant Design 组件库和周边工具
    • 了解互联网公司实际的前端开发模式和流程
    • 了解前端开发技术的实现原理
    • 提升实际开发能力和就业竞争力,能够承担真实业务

    学习本教程,你最终会得到一个可以运行的示例项目,该项目所有代码可以在 https://github.com/ant-design/react-tutorial 中拿到。但是我们推荐你按照章节的顺序,一步一步地自己搭建出整个示例项目。

    前置知识

    学习这本教程之前,读者需要了解前端开发的基本知识,理解网页的原理,会使用 HTML + CSS + JavaScript 写简单的网页。

    教程会大量使用 JavaScript 最新语法标准 ES6,所以也需要了解 ES6。如果你对这方面不熟悉,也没有关系,我们在附录里面,准备了 ES6 语法简介,可以开始学习之前,先读一下这个附录。

    另外,教程使用的是命令行开发,会用到 Node。你不需要对 Node 有很深的了解,但是需要会在命令行下执行 Node 脚本。所以,请确认你的开发环境已经安装了 Node。

    Ant Design 介绍

    这门课程主要教的是 Ant Design 组件库。那么,组件(component)到底是什么东西?

    如果你经常浏览各种网站,就会发现不管网页的主题是什么,通常都会使用一些重复出现的构件,比如日历、表格、表单、菜单、卡片、导航栏等等。这些构件的功能和外观都很类似,只是在一些细节的地方,根据需要做了定制。它们就叫做组件,一张完整的网页,可以看做是不同功能的组件的集合。

    很早就有人设想,如果能够把常用的组件都封装好,提供给开发者,那么网页开发就会变得非常简单,只要把不同的组件像搭积木那样组合起来,就能做出一张网页。

    但是,由于浏览器和 JavaScript 对组件的支持一直不完善,这个想法实行起来困难重重。很长一段时间,组件库几乎没有进展。

    2014年,React 框架发布,为组件提出了一套可行的解决方案。从此,可以用于实际开发的组件库才变成了现实。

    Ant Design 就是基于 React 实现的一套组件库。它是由蚂蚁金服体验技术部开发的,最早是在2015年发布的,到现在已经发布了三个大版本,目前一共封装了50多个组件。它在国内得到广泛使用,可能是使用量最大的 React 组件库,在国际上也有一定的知名度。

    它的功能完备,使用简单。你会发现使用 Ant Design,可以很快做出一张网页,真的就像搭积木一样。

    值得一提的是,Ant Design 不仅包括组件,也包括一套设计规范和理念。组件库可以看做是 Ant Design 设计规范的 React 实现。Ant Design 想要带给用户,不仅仅是功能,还包括漂亮的外观和良好的体验。

    React 介绍

    Ant Design 是基于 React 开发的。要使用 Ant Design,必须学会 React。

    React 是 Facebook 公司推出的一套前端开发框架,是目前全世界最流行的前端框架。它的核心理念是将网页应用看成一个组件构成的状态机(state machine),状态的变化导致了 UI 的变化。

    React 本身的 API 并不多,是一个较为简单的框架。但是,要用好它,必须使用其他的配套工具,所以人们常说学习 React 并不是学习一个框架,而是学习一整套 React 技术栈。

    这门课程之中,我们也给大家准备了 React 入门章节和深入学习章节,帮助大家学会 React。

    umi 介绍

    https://umijs.org/

    React 组件使用的是 JSX 语法和很多新的 ES6 语法,浏览器不支持。另外,不同的组件脚本必须打包在一起,浏览器才能加载。

    因此,React 应用有一个构建过程,将源码编译为生产环境代码。这个步骤对于新手来说是比较麻烦的,因为有很多配置的细节,而且包括很多重复的环节,每个项目都必须做一次,也是很烦人的。

    因此,我们开发了一个工具 umi,封装了编译步骤,包括了很多开发时的有用工具。只要你写好 React 代码,接下来 umi 就会把它处理为生产代码。

    umi 也是蚂蚁金服体验技术部推出的工具。本课程采用 umi 和 Ant Design 配套使用。

    学习交流群

    大家在学习的过程中可以到钉钉学习交流群内交流沟通。

     

    贡献者

    本教程是通过程序自动同步,语雀中显示的作者并不是实际的作者。该课程是由下面的同学们共同编写的:

    以上排名不分先后。

    展开全文
  • ant design入门学习笔记

    万次阅读 2018-04-01 22:24:50
    今天要学习一种新的企业级UI组件——ant design 参考资源https://ant.design/docs/react/introduce 特点 面向Web应用程序的企业级UI设计语言。 开箱即用的一组高品质React组件。 用TypeScript完全定义的类型...

    今天要学习一种新的企业级UI组件——ant design
    参考资源https://ant.design/docs/react/introduce

    特点

    面向Web应用程序的企业级UI设计语言。
    开箱即用的一组高品质React组件。
    用TypeScript完全定义的类型编写。
    整套开发和设计资源和工具。

    环境支持

    现代浏览器和Internet Explorer 9+(带polyfills)
    服务器端渲染
    电子

    版本

    稳定: npm v3.3.3
    您可以订阅此提要以获取新版本通知:https://github.com/ant-design/ant-design/releases.atom

    npm

    我们使用npm的目的是——安装ant design
    我们建议使用npm或纱线进行安装,这不仅使开发更容易,而且还使您能够利用丰富的Javascript包和工具生态系统。

    具体了解什么是npm
    我摘抄了一点简介:
    npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
    下面是关于 npm 的快速介绍:
    npm 由三个独立的部分组成:
    网站
    注册表(registry)
    命令行工具 (CLI)
    网站 是开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径。
    注册表 是一个巨大的数据库,保存了每个包(package)的信息。
    CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。
    ]: npm中文文档 https://www.npmjs.com.cn/
    npm官网:https://www.npmjs.com/

    下载与安装

    可以直接访问这里https://docs.npmjs.com/getting-started/installing-node了解如何安装npm
    下载node.js 和npm 地址:(node.js包含了npm)https://nodejs.org/en/download/
    这里我下载了windows环境最新版:node-v8.11.1-x64.msi 对应npm版本为5.6.0
    (安装步骤[这里是在windows上安装的步骤,至于linux可以自行参阅:https://github.com/creationix/nvm/blob/master/README.md#installation
    ]参考http://www.runoob.com/nodejs/nodejs-install-setup.htmlhttps://www.cnblogs.com/goldlong/p/8027997.html

    基础命令

    这里还有一些基础的命令解释:http://www.jb51.net/article/133126.htm
    其中我们等会安装ant design用到的是:–save :保存配置信息到 package.json文件中。package.json是nodejs项目的配置文件。

    检查版本

    安装好了以后,检查版本
    (要记得设置他们的path环境变量哦,也可以在安装的时候选择第四个:自动设置环境变量)
    nodevnode−v npm -v

    使用npm安装ant design

    $ npm install antd

    PS:对于这些提示自己手动下载的
    例:npm WARN antd@3.3.3 requires a peer of react-dom@>=16.0.0 but none is installed. You must install peer dependencies yourself.
    统统在这里用npm命令下载下来(例:npm install react-dom )。。直到安装antd不报错为止

    • antd@3.3.3
      updated 1 package in 12.295s

    现在我们就安装好了ant design

    入门例子

    使用dva cli工具创建一个新项目

    下载安装dva-cli工具

    首先用npm命令下载这个dva-cli工具
    $ npm install dva-cli -g

    • dva-cli@0.9.2
      updated 1 package in 73.681s

    使用dva新建一个项目

    $ dva new myapp
    + dva@2.1.0

    updated 1 package in 41.681s
    npm.cmd install end

    Success! Created myapp at D:\cc_study\cc_study\ant_design\myapp.

    Inside that directory, you can run several commands:
    * npm start: Starts the development server.
    * npm run build: Bundles the app into dist for production.
    * npm test: Run test.

    We suggest that you begin by typing:
    cd D:\cc_study\cc_study\ant_design\myapp
    npm start

    Happy hacking!
    以上提示我们创建好了myapp这个小栗子,我们可以npm start运行这个项目

    运行这个项目

    D:\cc_study\cc_study\ant_design\myapp>npm start

    Starting the development server…
    Compiled successfully!

    You can now view Your App in the browser.

    Local: http://localhost:8000/
    On Your Network: http://192.168.0.105:8000/

    Note that the development build is not optimized.
    To create a production build, use npm run build.

    访问查看

    访问:http://localhost:8000/
    这里写图片描述

    使用init cli 工具创建项目

    下载安装init-cli工具

    npm install antd-init -g

    mkdir antd-demo
    cd antd-demo

    使用init新建一个项目

    antd-init
    npm install

    运行

    npm start

    访问查看

    访问http://localhost:8000/
    这里写图片描述

    antd-init@2 仅适用于学习和体验 antd,如果你要开发项目,推荐使用 dva-cli 进行项目初始化。dva 是一个基于 react 和 redux 的轻量应用框架,概念来自 elm,支持 side effects、热替换、动态加载等,已在生产环境广泛应用。
    antd-init@2 is only for experience antd. If you want to create projects, it’s better to init with dva-cli. dva is a redux and react based application framework. elm concept, support side effects, hmr, dynamic load and so on.

    Usage:

    npm install dva-cli -g
    dva new myapp
    cd myapp
    npm start

    Visit https://github.com/dvajs/dva to learn more.

    根据提示语我们看出他推荐dva方式。

    ant design的初衷——前后端分离

    例如刚才我们的两个前端例子写好了以后:

    最后我们可以:
    构建与部署
    $ npm run build
    入口文件会构建到 dist 目录中,你可以自由部署到不同环境中进行引用。
    D:\cc_study\cc_study\ant_design\antd-demo>npm run build

    @ build D:\cc_study\cc_study\ant_design\antd-demo
    atool-build

    Child
    Time: 11417ms
    Asset Size Chunks Chunk Names
    common.js 1.18 kB 0 [emitted] common
    index.js 341 kB 1, 0 [emitted] index
    index.css 126 kB 1, 0 [emitted] index

    可以看见部署后文件夹里面多了个dist文件夹,里面包含了部署后的文件:
    这里写图片描述

    然后我们可以吧这些文件放在我们的项目里面引用即可:
    这里写图片描述

    demo.jsp中如何引用呢?
    antd-demo项目中有一个测试的入口页面:
    D:\cc_study\cc_study\ant_design\antd-demo\Index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Demo</title>
      <link rel="stylesheet" href="index.css" />
    </head>
    <body>
    
    <div id="root"></div>
    
    <script src="common.js"></script>
    <script src="index.js"></script>
    
    </body>
    </html>

    我们引用的时候照着这个即可

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ant design——前后端分离</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="root"></div>
    </body>
    </html>
    
    <!-- 引入公用文件 -->
    <script src="common.js"></script>
    <!-- 引入入口文件 -->
    <script src="index.js"></script>

    现在我们启动项目,访问此jsp即可:
    这里写图片描述

    是不是很方便呢?我们没有加入任何依赖包,全部在本地npm命令中按需加载然后生成了小栗子开发并start测试,最后build部署后的一系列文件,就可以直接拿到项目中使用,非常灵活。而不用像以前一样,吧所有的组件全部复制到项目中。

    使用推荐的dva

    说是学习antd,其实里面很多语法来自其他地方,antd在其中的table等充作展示组件。

    这节我们的目标是快速搭建 dva 项目,并熟悉他的所有概念。

    我们的dva工具好啦,而且之前我们也用dva创建了一个小项目环境myapp,那么在开发的时候我们如何开始我们自己需要的东西呢?
    参考https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/getting-started.md
    这里可以告诉我们在实现自己的需求的时候,该怎么做。

    接到需求之后推荐的做法不是立刻编码,而是先以上帝模式做整体设计。
    1.先设计 model
    2.再设计 component
    3.最后连接 model 和 component

    按照链接的小李子一步步实现即可。会有个初步的了解。

    今天就到这里吧,已经了解了整个项目大致如何实现,下一文再具体学习一下antd组件。

    展开全文
  • ant.design初探

    千次阅读 2019-05-10 09:39:25
     ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计方便我们快速开发和减少不必要的设计与代码,很多实用react框架的开发者都已经在使用ant.design了,且其在github上的star数也早已上万,足...

    第一部分: 前言

       推荐网站: https://ant.design/docs/spec/introduce-cn 

      ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计方便我们快速开发和减少不必要的设计与代码,很多实用react框架的开发者都已经在使用ant.design了,且其在github上的star数也早已上万,足见其火热程度。

      ant.design的目的也在于提高用户、开发者等多方的体验与幸福感。

      

      ant.design设计很精妙,vue的iview就是模仿ant.design来实现的。

      

      

      既然要使用ant.design,我们不妨了解其设计原则是否是我们想要的,对于设计,我了解的最多的便是对比、对齐、亲密性、重复性,而ant.design也很好的实现了这些规则,并在此基础山践行了更多的想法。

    • 直接了当  『需要在哪里输出,就要允许在哪里输入』。这就是直接操作的原理。eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。
    • 足不出户
    • 简化交互 --- 如悬停时出现工具,qq在这里做的很好。
    • 提供邀请
    • 巧用过渡

      https://ant.design/docs/spec/colors-cn

     

    第二部分: 使用(引入css不好的方法)

      ant.design 使用起来非常简单。

      第一步:

    npm install antd --save

      

      第二步(选择性的):

    将node_modules下面的dist下面的 antd.min.css 取出放在静态文件中,在head中link引入。

     

      第三步,开始使用:

    在某个组件的上方:

    import {message} from 'antd'

     

    然后在需要的时候使用: message.error('错误'); message.success('登录成功!'); 类似的使用即可。

      

      如果我们仅仅是js,css完全自己写,那么上面的就足够了,但是,如果我们希望使用 ant.design 提供的css,那么我们就需要把css文件取出放在静态文件中,并在html的head中引用了。 

     

      注意: 在使用的时候引入的css中还使用了css初始化,如下所示:

     View Code

       

       其实,有些时候,使用 ant.design 没有办法满足我们的样式要求,所以,我们就需要使用 !important 来先找到样式然后强制来覆盖,但这绝对不是最佳实践。 

       下面我们介绍一种比较好用的方法。 

     

     

     

     

    第三部分: 使用(引入CSS较好的做法)、解析

      之前我们引入css的方式是直接把整个css文件引入,这时一种不好的做法,因为在一个项目中也许我们仅仅是使用其中的几个组件,所以引入所有的css是完全没有必要的。 

      那么解决办法是什么呢? 

      拿 message 举例,我们可以在node_modules下的antd下的message中看到如下结构:

           

      即,这里不仅仅有 index.js 和 index.d.ts 两者构成的js组件,还有一个 style 文件夹,这个文件夹中描述了对组件的样式。我们是可以直接从这里引入的。 

      

      比如,我们需要引入 message 的组件和相关的css,可以像下面这样:

    import { message } from 'antd';
    require('antd/lib/message/style') 

      当然也可以不用require, 用 import 也是可以的,如下所示:

    import { message } from 'antd';
    import 'antd/lib/message/style'

      

      对于第一条语句,很容易理解,即引入了message的js组件。

      对于第二条语句,由于 style 是一个文件夹,根据规则,是默认寻找其中的 index.js ,我们看看 index.js 中的内容是什么? 

    'use strict';
    
    require('../../style/index.less');
    
    require('./index.less');

      其中的 ../../style/index.less 是ant.design的主题配置,比如,我们可以配置它的整体的颜色、文字大小等等。

      另外,就是引入了这个style下面的 index.less, 比如message下的less是这样的:

    复制代码

    @import "../../style/themes/default";
    
    @message-prefix-cls: ~"@{ant-prefix}-message";
    
    .@{message-prefix-cls} {
      font-size: 16px;
      position: fixed;
      z-index: @zindex-message;
      width: 100%;
      top: 0px;
      left: 0;
      pointer-events: none;
    
      &-notice {
        padding: 16px;
        padding-top: 16px;
        text-align: center;
        &:first-child {
          margin-top: -8px;
        }
      }
    
      &-notice-content {
        padding: 16px 32px;
        border-radius: @border-radius-base;
        box-shadow: @shadow-2;
        background: @component-background;
        display: inline-block;
        pointer-events: all;
      }
    
      &-success .@{iconfont-css-prefix} {
        color: @success-color;
      }
    
      &-error .@{iconfont-css-prefix} {
        color: @error-color;
      }
    
      &-warning .@{iconfont-css-prefix} {
        color: @warning-color;
      }
    
      &-info .@{iconfont-css-prefix},
      &-loading .@{iconfont-css-prefix} {
        color: @info-color;
      }
    
      .@{iconfont-css-prefix} {
        margin-right: 8px;
        font-size: @font-size-lg;
        top: 1px;
        position: relative;
      }
    
      &-notice.move-up-leave.move-up-leave-active {
        animation-name: MessageMoveOut;
        overflow: hidden;
        animation-duration: 0.3s;
      }
    }
    
    @keyframes MessageMoveOut {
      0% {
        opacity: 1;
        max-height: 150px;
        padding: 8px;
      }
      100% {
        opacity: 0;
        max-height: 0;
        padding: 0;
      }
    }

    复制代码

      

      我们如果觉得样式不合适,只需要在这个less文件中直接修改就可以了。这样就会经过编译在页面上显示出效果。 

     

      那么其中的js文件又代表什么呢? 即一个是 index.js, 另外一个是 index.d.ts,这两个文件就描述了这个 message 组件。 我们首先来看看 index.js 内容吧,直接在代码中注释解释:'use strict';// 这句声明表示这个文件是一个可以被引入的模块。

    复制代码

    Object.defineProperty(exports, "__esModule", {
        value: true
    });
     
    // 引入react
    var _react = require('react');
    
    var _react2 = _interopRequireDefault(_react);
    
    // 引入 rcNotification
    var _rcNotification = require('rc-notification');
    
    var _rcNotification2 = _interopRequireDefault(_rcNotification);
    
    // 引入 icon 组件,即通知正确、错误时的图标icon
    var _icon = require('../icon');
    
    var _icon2 = _interopRequireDefault(_icon);
    
    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
    
    // 通知的toast默认时间设置为3s
    var defaultDuration = 3;
    
    // 这里的void后面可以是一个表达式,但是这个表达式的返回结果永远是undefined。 
    var defaultTop = void 0;
    var messageInstance = void 0;
    var key = 1;
    
    // 这里应该是组件的前缀
    var prefixCls = 'ant-message';
    var getContainer = void 0;
    
    // 获取一个 message 实例
    function getMessageInstance() {
        messageInstance = messageInstance || _rcNotification2['default'].newInstance({
            prefixCls: prefixCls,
            transitionName: 'move-up',
            style: { top: defaultTop },
            getContainer: getContainer
        });
        return messageInstance;
    }
    
    
    function notice(content) {
        var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
        var type = arguments[2];
        var onClose = arguments[3];
    
      // 定义icon的样式
        var iconType = {
            info: 'info-circle',
            success: 'check-circle',
            error: 'cross-circle',
            warning: 'exclamation-circle',
            loading: 'loading'
        }[type];
      
      //  在notice(通知)的时候创建一个实例
    var instance = getMessageInstance();
        instance.notice({
            key: key,
            duration: duration,
            style: {},
            content: _react2['default'].createElement(
                'div',
                { className: prefixCls + '-custom-content ' + prefixCls + '-' + type },
                _react2['default'].createElement(_icon2['default'], { type: iconType }),
                _react2['default'].createElement(
                    'span',
                    null,
                    content
                )
            ),
            onClose: onClose
        });
        return function () {
            var target = key++;
            return function () {
                instance.removeNotice(target);
            };
        }();
    }
    
    // 关键: 暴露出去的方法,就是我们在组件中引入message时可以直接调用的方法。 
    exports['default'] = {
        info: function info(content, duration, onClose) {
            return notice(content, duration, 'info', onClose);
        },
        success: function success(content, duration, onClose) {
            return notice(content, duration, 'success', onClose);
        },
        error: function error(content, duration, onClose) {
            return notice(content, duration, 'error', onClose);
        },
    
        // Departed usage, please use warning()
        warn: function warn(content, duration, onClose) {
            return notice(content, duration, 'warning', onClose);
        },
        warning: function warning(content, duration, onClose) {
            return notice(content, duration, 'warning', onClose);
        },
        loading: function loading(content, duration, onClose) {
            return notice(content, duration, 'loading', onClose);
        },
        config: function config(options) {
            if (options.top !== undefined) {
                defaultTop = options.top;
                messageInstance = null; // delete messageInstance for new defaultTop
            }
            if (options.duration !== undefined) {
                  = options.duration;
            }
            if (options.prefixCls !== undefined) {
                prefixCls = options.prefixCls;
            }
            if (options.getContainer !== undefined) {
                getContainer = options.getContainer;
            }
        },
        destroy: function destroy() {
            if (messageInstance) {
                messageInstance.destroy();
                messageInstance = null;
            }
        }
    };
    module.exports = exports['default'];

    复制代码

      可以看到,这些方法,如 message.info() 、message.warning()都可以接收三个参数

    • 希望通知的信息
    • 这个通知信息所持续的时间
    • 当通知结束之后的回调函数

       ok!下面我们来看看 index.d.ts 文件:

    复制代码

    /// <reference types="react" />
    import React from 'react';
    export declare type ConfigOnClose = () => void;
    export interface ConfigOptions {
        top?: number;
        duration?: number;
        prefixCls?: string;
        getContainer?: () => HTMLElement;
    }
    declare const _default: {
        info(content: React.ReactNode, duration?: number | undefined, onClose?: ConfigOnClose | undefined): () => void;
        success(content: React.ReactNode, duration?: number | undefined, onClose?: ConfigOnClose | undefined): () => void;
        error(content: React.ReactNode, duration?: number | undefined, onClose?: ConfigOnClose | undefined): () => void;
        warn(content: React.ReactNode, duration?: number | undefined, onClose?: ConfigOnClose | undefined): () => void;
        warning(content: React.ReactNode, duration?: number | undefined, onClose?: ConfigOnClose | undefined): () => void;
        loading(content: React.ReactNode, duration?: number | undefined, onClose?: ConfigOnClose | undefined): () => void;
        config(options: ConfigOptions): void;
        destroy(): void;
    };
    export default _default;

    复制代码

     

      哈哈 ,看不懂,等看完了ts回来讲解。

     

      

     

    第四部分: ant.design的栅格系统

      在 ant.design 中,对于栅格系统的设计和bootstrap中的设计是极其类似的,核心概念为: Row一定是最外层的, Col一定是分布在Row中的, 内容一定是在Col里的, 当然,在Col中我们还可以嵌套Row,在antd中, Col被分成了24分(与bootstrap的12份是类似的)。 

      在Col中,我们可以使用span={number}来制定一个Col的宽度,具体的做法是使用 百分比 来划分, 如 span={4} 的占满,那么每一份就是 16.6667% , 如果 span={12} 占满,那么每一份就是 50%。。。。 依次类推。 

      另外,在Col中我们还可以使用offset来进行便宜,正值为向右偏移,使用的原理是 margin-left 或者是 margin-right。 

      我们还可以在Row中设置 gutter={number } 这个值就是栅格的间距,具体实现原理就是对div根据百分比来划分,然后在div内容使用padding,这时content肯定是减小的。 

         除此之外,还可以在 Col 中设置 push={number} 以及 pull={number},实现原理也非常简单,就是使用元素的 position: relative;值,通过 left=百分比;以及right=百分比; 这样就可以实现pull 和 push 就可以了。 

      

      当然,我们还可以使用 Row 的flex进行布局,这种布局方式只需要在 Row 上设置 type="flex",就可以设置竖直和水平对齐方式了。 

      竖直对齐方式:

    • align="top" 向上对齐
    • align="middle" 中间对齐
    • alegn="bottom" 向下对齐

      水平对其方式:

    • justify="start" 左对齐
    • justify='end' 右对齐
    • justify="center" 中间对齐
    • justify='space-between' 中间
    • jusify="space-around" 中间

      

      这些flex布局的原理也很简单,就是直接使用css3的flex, 如align-items以及 justify-content。   

       

      另外, ant.design也是支持响应式布局的 。 和bootstrap一样。

     

     

      注意点:

    • 一般在我们制作表格的时候,可以使用 ant.design 的栅格系统,比如,左边是说明性文字,右边是选择项或者是input框。 整体使用flex布局即可。 左边的给一个固定的宽度,如span={4},右边的就是span={24}了, 并且在右边,如果是input框就比较好解决,如果是几个框,我们需要分开排列,就需要使用一个 <Row>,然后设置flex,其中justify应该是space-between,而能是start、end、center或者是 space-around。 因为对于 start、end、center,会使得几个框都会贴的很紧(除非是我们在其中再添加一个div,然后添加一个padding,这样才能做到分割),那么space-between和space-around的区别是什么?前者是两边贴近然后中间有空位置,而后者是两边的距离为中间padding的一般。 
    • 另外,我们也是可以用gutter的,但是最好不用,因为,gutter在两边也会有间距,这样对于对齐的控制非常麻烦。

    转载自:https://www.cnblogs.com/zhuzhenwei918/p/7233560.html

    展开全文
  • 这是一个从零开始的react ant-desgin教程 详细记录从零开始搭建个站的过程; 学习react 学习框架 学习ant-desgin 前端的学习是无止境的 愿我们在以后的道路一帆风顺 加入QQ群734585334 让我们一起学习 分享 记录 ...

    简介: 刚入手一个服务器 打算搭个个站, 平时工作都是用vue ;为了扩展自己的实战能力 来从头开始实战用用react吧;结合ant-design一起开发,然后后台nodejs来写; 编写我的第一个教程文章,从头到尾记录整个过程 因为是实战项目;部分基础的创建react的和基本语法什么的话各位就自便了 如果有需要的话 我是可以开篇博客的;需要的留言— —
    ღ( ´・ᴗ・` )比心

    因为并不是很熟悉这两个框架 所以如果有做的不好的 请各位大神指导下小弟 谢谢了

    作者:webmxj
    csdn博客名:div_ma
    联系方式:webmxj@163.com
    微信:webmxj
    QQ交流群:734585334
    QQ:642525655 加我请备注前端

    相关链接:
    react+ant.design 从零开始搭建个人博客实战01 —— 起步
    react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
    react+ant.design 从零开始搭建个人博客实战03 —— 路由
    react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
    react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用

    项目准备:
    1.任意一个编辑器;这个看个人喜好 我用的是webstore;
    2.配置好react-app 和 引入ant-design框架; 如何弄得可以参考链接教程:
    https://ant.design/docs/react/use-with-create-react-app-cn
    这一部分因为ant-design有详细的教程我就不过多讲解 如果有不知道的可以通过上面的方式联系我

    准备工作完成后正式开始了 :

    1.创建目录:

    目录解构大致如下
    目录

    2.创建布局主框架并创建router.js

    安装 react-router-dom;

    yarn add react-router-dom
    这里写图片描述
    然后在src下新建文件router.js
    这里写图片描述

    3.新建通用布局界面

    在layouts文件中创建DefaultLayout.js 用来作为通用布局 并在文件中写入HelloWorld字样;
    和创建LoginLayout.js写入LoginUser字样

    HelloWorld
    这里写图片描述
    接着修改router.js中的代码 引入react-router-dom 如下

    import React,{Component} from 'react';
    import {HashRouter,Route,Switch} from 'react-router-dom';
    import DefaultLayout from './layouts/DefalutLayout/DefaultLayout';
    import LoginUser from './layouts/LoginUser/LoginUser';
    export default class RouterWrap extends Component{
        render(){
            return (
                <div id="router">
                    <HashRouter>
                        <Switch>
                            <Route path="/" component={DefaultLayout}  exact />
                            <Route path="/login" component={LoginUser} />
                        </Switch>
                    </HashRouter>
                </div>
            )
        }
    }

    修改app.js 引入刚才创建的router组件

    import React, { Component } from 'react';
    import RouterWrap from './router';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
              <RouterWrap/>
          </div>
        );
      }
    }
    
    export default App;

    然后运行 yarn start 打开localhost:3000
    就可以看到 helloworld了
    这里写图片描述
    然后修改路由为http://localhost:3000/#/login会显示为
    这里写图片描述
    这样子简单的路由切换就实现了 接下来进行界面的布局

    4.修改配置 引入less文件

    引入less样式文件 配置的话在ant-design上面有引入less的配置
    https://ant.design/docs/react/use-with-create-react-app-cn
    在自定义主体那里 引入了react-app-rewire-less模块 并修改了
    配置完后就可以直接引入less文件了 config-overrides.js文件 就可以了

    新建DefaultLayout.less文件 然后在文件中写入

    #DefaultLayout{
      color: red;
    }

    然后在DefaultLayout.js文件中引入

    import './DefaultLayout.less'

    现在打开localhost:3000 就能看见红色字体的helloworld;

    这里写图片描述
    这里写图片描述

    起步到这里就结束了 接下来在这个框框上搭建各个页面

    欢迎继续观看
    相关链接:
    react+ant.design 从零开始搭建个人博客实战01 —— 起步
    react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
    react+ant.design 从零开始搭建个人博客实战03 —— 路由
    react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
    react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用

    展开全文
  • Ant Design

    千次阅读 2019-05-28 09:09:52
    Ant Design 服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。 Ant Design Mobile of React Ant Design Mobile of Angular Ant ...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 先来一个按钮组件使用的对比,官方文档的(不能直接用)和实际能用的。 ...import { Table, Divider, Tag } from 'antd';... k...
  • Ant Design 4.0 正式版来了!

    千次阅读 2020-03-02 03:09:42
    Ant Design 4.0 正式版来了引言我们在 SEE Conf 之际发布了4.0 rc 版本。经过 1 个多月的反馈收集和调整之后,我们终于迎来了 4.0 的正式版!感谢在此期...
  • Ant-design Modal实现可以拖动的效果

    千次阅读 2020-03-01 14:14:58
    最近项目组在开发的时候提出了一个需求,需要让 ant-design Modal实现能够拖动的功能,研究了一番,基于 and-design Modal自己封装了一个antd-draggable-modal组件。 特性: 支持弹出窗居中打开 支持拖拽 title ...
  • Ant Design 页面的跳转

    万次阅读 2018-12-05 11:56:23
    import {routerRedux} from 'dva/router'; 在页面时跳转使用 dispatch(routerRedux.push('/')); 在model里面跳转 yield put(routerRedux.push('/'));
  • Vue-Ant Design Pro of Vue

    万次阅读 2019-05-22 15:00:21
    本来呢是想写一些关于Ant Design Vue的文章,不过恰好用到了一个开源的基于Ant Design Vue 开发的Ant Design Pro of Vue的中后台框架,就在此基础上写一些关于Ant Design Pro of Vue的文章。在此之前,先介绍一下Ant...
  • 首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误。是一个很好的组件库。关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与...
  • Ant Design介绍

    万次阅读 2016-10-13 16:35:54
    Ant Design介绍 在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。我们(蚂蚁金服体验...
  • Ant Design Pro入门教程 安装框架

    万次阅读 2018-05-04 17:29:31
    介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro 脚手架安装完成,运行起来的样子: 下面我们来看看怎么安装这套后台管理系统 安装 有两种方式进行...
  • 蚂蚁金服 ant design 下载axure 组件库

    万次阅读 2019-05-21 15:50:07
    需要画手机端原型图 ,找了半天,原来在这里。 进入蚂蚁金服 最上面 设计语言 ; 其他 设计资源
  • 前言 NodeJS 分类: https://blog.csdn.net/freewebsys/article/category/6904116 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/87879235 未经博主允许不得转载。 ...1,关于 人家...
  • Axure ant.design 搭建小项目原型图

    万次阅读 2016-10-26 16:54:14
    Ant Design Library v2.0.1 蚂蚁金服体验技术部出品,https://ant.design/docs/resource/download 注意ICON的使用: 因为该原型图为移动端,所有采用移动端的样式风格,先上图: 上图中,有个需要注意的地方,...
  •   .standardTable { :global { ....ant-table-thead &gt; tr &gt; th &gt; { text-align: center; } .ant-table-tbody &gt; tr &gt; td { text-align: center;   }
  • Ant Design Tabs切换控制

    万次阅读 2019-05-31 14:14:58
    注意点: 1.需要绑定activeKey,而不是defaultActiveKey属性,否则加载完成后无法通过设置state值切换。 2.绑定activeKey后选项卡切换点击无效,需通过点击事件修改state值才... ...tabClickHandler = (params) =&...
  • 问题: 使用 antdesign 下拉框的默认值是状态值,而不是状态值对应的文案? model层传递的数据 view层在表单中设置的值 解决方案: 在默认值的后面加上一个空字符串进行转换...
  • Ant Design Pro 开启默认进入登录页

    千次阅读 2019-06-30 16:06:31
    src/utils/authority.js getAuthority方法中 return authority || ['admin']; 改为 return authority || ['guest'];
1 2 3 4 5 ... 20
收藏数 23,142
精华内容 9,256
关键字:

ant design