一、什么是 Ant Design

1、Ant Design 提炼自企业级中后台产品的交互语言和视觉风格

2、Ant Design 使用 TypeScript 构建,提供完整的类型定义文件

二、Ant Design 的安装

1、在项目根目录终端引入:

npm install antd --save

2、在 index.js 中加入:

import 'antd/dist/antd.css';

三、Ant Design 的使用

这里引用 Ant Design 的 Spin 组件作为例子

(1)在页面的 script 中导入 Spin 组件

import { Spin } from 'antd';

(2)在 render() 中直接使用 <Spin />

  render() {
return (
<React.Fragment>
<Spin />
</React.Fragment>
)
}

运行效果:

更多 MintUI 组件请参考 https://ant.design/docs/react/introduce-cn

React组件库Ant Design的安装与使用的更多相关文章

  1. React实战之Ant Design—Upload上传_附件上传

    React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...

  2. 如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

  3. 七个不可错过的React组件库与开发框架

    React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用.从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分 ...

  4. React组件库集锦及学习视频

    [转载]https://www.rails365.net/articles/react-zui-hao-de-ui-zu-jian-ku-ji-jin 这里有一篇讨论,说了哪个才是 React 最好的 ...

  5. react 编写 基于ant.design 页面的参考笔记

    前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...

  6. React组件库

    图表组件库:Recharts(React和D3构建的图表库) UI组件库:react-bootstrap

  7. React 组件库框架搭建

    前言 公司业务积累了一定程度,需要搭建自己的组件库,有了组件库,整个团队开发效率会提高恨多. 做组件库需要提供开发调试环境,和组件文档的展示,调研了几个比较主流的方案,如下: docz 配置简单,功能 ...

  8. [翻译]怎么写一个React组件库(二)

    本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...

  9. [翻译]怎么写一个React组件库(一)

    本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...

随机推荐

  1. [LeetCode] 681. Next Closest Time 下一个最近时间点

    Given a time represented in the format "HH:MM", form the next closest time by reusing the ...

  2. 【视频开发】【Live555】通过live555实现H264 RTSP直播

    前面的文章中介绍了<H264视频通过RTMP流直播>,下面将介绍一下如何将H264实时视频通过RTSP直播. 实现思路是将视频流发送给live555, 由live555来实现H264数据流 ...

  3. 本地mysql启动之后,另外一台电脑利用数据库访问软件,连接问题

    背景:在一台电脑上面安装MySQL数据库之后,利用另一台电脑访问本台电脑上面的数据,访问失败的问题 解决方法 开启 MySQL 的远程登陆帐号有两大步: 1.确定服务器上的防火墙没有阻止 3306 端 ...

  4. 笨方法学Python摘记(1)

    编程新手所需的最重要的三种技能:读和写.注重细节.发现不同 不要复制粘贴! #-*-codinig:utf-8 -*-  (脚本使用unicode UTF-8) 书写习惯:操作符的两边加上空格,提高代 ...

  5. Java开发笔记(一百三十)Swing的选择框

    不管是AWT还是Swing,都把选择框分成两类:复选框和单选按钮,这两类控件无论是外观上还是功能上均有显著差异.例如,在外观方面,复选框是在方框内打勾,而单选按钮是在圆圈内画圆点:在功能方面,复选框允 ...

  6. GhostScript说明

    关于ghostscript(以下简称gs).Gs是一个地下工作者,一般用户不熟悉它,因为它上不和用户直接打交道,下不直接接触打印机.但是在打印工作中它却扮演了极为重要的解色. 一般从用户常见文件如图片 ...

  7. linux maven 安装

    1.使用wget命令下载maven安装包 wget https://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.2/binaries/a ...

  8. linux 系统扩容 VMware Centos---VMware ESXi

    用到的命令 df  fdisk  pvcreate   pvdisplay    vgdisplay    vgextend    lvdisplay    lvextend  resize2fs 0 ...

  9. git学习笔记 ---版本退回

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  10. redis GEO的使用

    一.概念 redis的GEO特性在Redis3.2版本发布,这个功能可以将用户给定的地理位置信息储存起来,并对这些信息进行操作. GEO常用语LBS(Location Based Service),基 ...