一、什么是 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. openstack keystone 命令详细

    命令使用之前需要  运行命令行“. admin-openrc” 用户(User) 查看用户列表 openstack user list 创建用户 openstack user create [-h] ...

  2. 十、Spring的@Profile注解

    首先我们来看看spring官方文档对这个注解的解释: The @Profile annotation allows you to indicate that a component is eligib ...

  3. vue通过ajax加载json数据

    HTML <ul id="Hanapp"> <li class="styVue" v-for="item in actList&qu ...

  4. 【转帖】5G基站建设下的“中国速度”:北上广深领跑全国,均超1万个

    5G基站建设下的“中国速度”:北上广深领跑全国,均超1万个 https://www.laoyaoba.com/html/news/newsdetail?source=pc&news_id=73 ...

  5. C 风格字符串、string 类要点总结

    1. C风格字符串 1.1 其它 头文件<cstring> 特殊性质:C风格字符串以空字符\0结尾 1.2 读取一行的区别 1.2.1 cin.getline(array1,n,char) ...

  6. c++快速排序原理及优化

    快速排序 快速排序的时间复杂度为O(logn) 注意:快速排序主要是标志数的选取,如果所选的数恰好为最小或者最大,则是最糟糕的情况,即一轮下来数据没有发生变化! 如何选取中间的标志数成为了算法的关键. ...

  7. Eclipse Block Selection(块选择)快捷键 Alt + Shift + A

    说实话,我暂时还没用过这个快捷键.但是不代表以后我也不会用它. Eclipse 有个地方可以专门查看这些小技巧. Help → Tip of the Day 进入下面这个窗口: 将 Unread on ...

  8. Wing电信平台操作方法

    Wing电信平台操作文档 当前文档编制于2019/9/3 一.登陆 登陆网址 https://www.ctwing.cn/ 点击右上角控制台 点击左侧栏点击产品中心 选择需要注册的产品 二.注册设备 ...

  9. 最简单的centos上安装Nginx办法

    基本几个简单命令就能搞定 由于yum源中没有我们想要的nginx,那么我们就需要创建一个“/etc/yum.repos.d/nginx.repo”的文件,其实就是新增一个yum源. vi /etc/y ...

  10. 14-4 ADO.NET简介2

    14-4-1Connection连接.关闭数据库 1.为了访问数据库,就要提供数据库连接类,在C#中,是通过Connection类来实现的.它有 四种类型的连接方式: SQLConnection AD ...