一、什么是 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] 804. Unique Morse Code Words 独特的摩斯码单词

    International Morse Code defines a standard encoding where each letter is mapped to a series of dots ...

  2. Java设计模式之:单例模式

    单例模式 建议实现方式:枚举方式实现单例 单例模式的定义 单例模式就是在程序运行中只实例化一次,创建一个全局唯一对象,有点像 Java 的静态变量,但是单例模式要优于静态变量,静态变量在程序启动的时候 ...

  3. Kubernetes 控制器之 Deployment 介绍(六)

    一.Deployment.ReplicaSet.Pod之间的关系 我们接着前面的文章说,如果不清楚的请查看之前的博文:http://blog.51cto.com/wzlinux/2322616 前面我 ...

  4. Legacy和UEFI,MBR和GPT的区别

    Legacy(历史的,遗留的,传统的)和UEFI指的是系统引导方式(Legacy为传统BIOS,UEFI为新式BIOS),MBR和GPT指的是磁盘分区表类型. 一般情况下都是Legacy+MBR, U ...

  5. LeetCode 75. 颜色分类(Sort Colors) 30

    75. 颜色分类 75. Sort Colors 题目描述 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中, ...

  6. SQL——AS别名

    一.SQL别名的基本用法 SQL可以为表或者列指定别名. 语法格式如下(表): SELECT 列名1,列名2... FROM 表名 AS 别名; 语法格式如下(列): SELECT 列名1 AS 别名 ...

  7. Springboot+Quartz+MySql整合页面版

    目的: springboot整合Quartz 连接mysql整合出页面版 springboot整合Quartz 新建一个springboot项目来 导入pom依赖 <?xml version=& ...

  8. Linux -- touch 命令

    在Linux中,每个文件都关联一个时间戳,并且每个文件搜会存储最近一次访问的时间.最近一次修改的时间和最近一次变更的时间等信息.所以,无论何时我们创建一个新文件,访问或者修改一个已经存在的文件,文件的 ...

  9. as3鱼眼放大镜

    package { //hi.baidu.com/inuko //bitmapdata fisheye magnifier //原创代码,如有雷同,纯属巧合 /* 本例是使用近似算法,只是最简单的鱼眼 ...

  10. Luogu4069 SDOI2016 游戏 树链剖分、李超线段树

    传送门 每一次加的是一个一次函数,一些呈一次函数的线段求最小值,显然用到李超线段树. 然后把维护序列的李超线段树强行上树,就直接套上树剖就可以了. 至于李超树如何区间查询,因为一次函数线段的最小值一定 ...