React组件库Ant Design的安装与使用
一、什么是 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的安装与使用的更多相关文章
- React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
- 如何快速构建React组件库
前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
- 七个不可错过的React组件库与开发框架
React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用.从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分 ...
- React组件库集锦及学习视频
[转载]https://www.rails365.net/articles/react-zui-hao-de-ui-zu-jian-ku-ji-jin 这里有一篇讨论,说了哪个才是 React 最好的 ...
- react 编写 基于ant.design 页面的参考笔记
前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...
- React组件库
图表组件库:Recharts(React和D3构建的图表库) UI组件库:react-bootstrap
- React 组件库框架搭建
前言 公司业务积累了一定程度,需要搭建自己的组件库,有了组件库,整个团队开发效率会提高恨多. 做组件库需要提供开发调试环境,和组件文档的展示,调研了几个比较主流的方案,如下: docz 配置简单,功能 ...
- [翻译]怎么写一个React组件库(二)
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
- [翻译]怎么写一个React组件库(一)
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
随机推荐
- LODOP打印维护适应不同的客户端
之前的博文:Lodop打印设计.维护.预览.直接打印简单介绍,介绍了打印设计.打印维护.打印预览,直接打印等的区别和使用. 如上面以前博文描述的,打印维护是针对客户端进行调整的,开放打印维护给客户端, ...
- [LeetCode] 203. Remove Linked List Elements 移除链表元素
Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...
- .net MVC 项目中 上传或者处理进度获取方案
首先讲下思路 就是利用js轮询定时的给后台发送数据 话不多说看代码 --------- 以下是相关方法 var t function timedCount() { $.ajax({ type: 'ge ...
- Android属性动画-简单实例
1.ValueAnimator //在2000毫秒内,将值从0过渡到1的动画 ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f); anim.setD ...
- php_mvc实现步骤六
shop34-1-目录布局 存在项目的根目录 shop34 框架代码与应用程序代码划分 框架代码: 在各个应用程序间可以通用的代码. 应用程序代码: 当前项目的业务逻辑实现的代码. 分别创建两个子目录 ...
- 《十天学会 PHP》的重难点
记录一下我在学习<十天学会 PHP>(第六版)的过程中的遇到的重难点,该课程是学习制作一个简单的留言板. 准备工作 XAMPP(Apache + MySQL + PHP + PERL) 是 ...
- 用Python写一个滑动验证码
1.准备阶段 滑动验证码我们可以直接用GEETEST的滑动验证码. 打开网址:https://www.geetest.com/ ,找到技术文档中的行为验证,打开部署文档,点击Python,下载ZIP包 ...
- java之hibernate之基于外键的一对一单向关联映射
这篇讲解基于外键的一对一单向关联映射 1.考察如下信息,人和身份证之间是一个一对一的关系.表的设计 注意:基于外键的一对一关联的表结构和多对一的表结构是一致的,但是,外键是唯一的. 2.类的结构 Pe ...
- vmware的三种网络模式讲解
vmware有三种网络设置模式,分别是Bridged(桥接),NAT(网络地址转换),Host-only(私有网络共享主机) 1.Bridged(桥接) 桥接模式默认使用的是:VMnet0 什么是桥接 ...
- 树莓派Raspbian系统格式化挂载硬盘
1.查看树莓派系统挂载的储存设备 使用工具查看系统识别到的硬盘设备,命令: fdisk -l /dev/sda 和 /dev/sdb 分别是两块硬盘. 2.修改硬盘分区 Linux和windows一 ...