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,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
随机推荐
- 阿里云盾AliYunDun服务IO超高
停止阿里云盾AliYunDun服务解决大量写磁盘问题-小内存ECS服务器 阿里云数据库在没备案,涉及大量IO操作时会自动启动阿里云盾这个服务,会导致服务器变得很卡,一直持续百分之99,一顿重启没有什么 ...
- Influx Sql系列教程三:measurement 表
在influxdb中measurement相当于mysql中的表,可以理解为一条一条记录都是存与measurent中的,一个数据库中可以有多个measurement,一个measurement中可以存 ...
- Windows常用命令的使用
3.Tracert Tracert命令用来显示数据包到达目标主机所经过的路径,并显示到达每个节点的时间.该诊断实用程序将包含不同生存时间 (TTL) 值的 Internet 控制消息协议 (ICMP) ...
- Fiddler如何切换hosts以及切换hosts的另一个神器SwithcHosts
- Java开发笔记(一百一十六)采用UDP协议的Socket通信
前面介绍了如何通过Socket接口传输文本与文件,在示例代码中,Socket客户端得先调用connect方法连接服务端,确认双方成功连上后才能继续运行后面的代码,这种确认机制确保客户端与服务端的的确确 ...
- 宁夏网络赛-F-Moving On
https://www.cnblogs.com/31415926535x/p/11440395.html 一道简单的Floyd题,,但是是动态加点求多次有限制的最短路,,感觉这个思想很好,,当然可以直 ...
- laravel使用辅助函数url()引入js和css静态文件
使用laravel框架时可以将静态文件如,js文件,css文件,放到resources文件夹下的js下,当然也可以放到public文件夹下的js文件夹下,publi文件夹下默认情况下是没有css,js ...
- python 之 前端开发( jQuery事件、动画效果、.each()、 .data())
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- python学习-70 自定制format
# 自定义format dic_date = { 'ymd':'{0.year}:{0.month}:{0.day}', 'dmy':'{0.day}-{0.month}-{0.year}' } cl ...
- SPI通讯(Serial Peripheral interface)
1. SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线:SCLK,MISO,MOSI,CS 2. SPI结构简图: 可以看出,SPI主从设备两端都有一个位移寄存器,数据在位 ...