AntDesign组件库的使用

一、AntDesign的介绍

AntDesign ，简称 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

中后台的产品属于工具性产品，很多优秀的设计团队通过自身的探索和积累，形成了自己的设计体系。

AntDesign的特点：

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 React 组件。
使用 TypeScript 开发，提供完整的类型定义文件。
全链路开发和设计工具体系。
数十个国际化语言支持。
深入每个细节的主题定制能力。

全链路开发和设计指的是什么？

全链路这个词我记得是16年左右阿里提出的；
从业务战略—用户场景—设计目标—交互体验—用户流程—预期效率全方面进行分析和考虑；
这个主要是产品经理会考虑的一个点；

二、AntDesign兼容性

AntDesign的兼容性：

现代浏览器和 IE11（需要 polyfills）。
支持服务端渲染。
Electron

在这里插入图片描述
antd@2.0 之后不再支持 IE8，antd@4.0 之后不再支持 IE9/10。
目前稳定的版本：v4.4.0

三、AntDesign的安装

使用 npm 或 yarn 安装

npm install antd –save
或
yarn add antd

我们需要在index.js中引入全局的Antd样式：

import "antd/dist/antd.css";

在App.js中就可以使用一些组件了：

import React, {PureComponent} from 'react';
import moment from 'moment'
import {Button, Space, DatePicker} from 'antd'
import { PoweroffOutlined } from '@ant-design/icons';function onChange(date, dateString) {console.log(date, dateString);
}class App extends PureComponent {constructor(props) {super(props);this.state = {loadings: [],};}enterLoading = index => {this.setState(({ loadings }) => {const newLoadings = [...loadings];newLoadings[index] = true;return {loadings: newLoadings,};});setTimeout(() => {this.setState(({ loadings }) => {const newLoadings = [...loadings];newLoadings[index] = false;return {loadings: newLoadings,};});}, 6000);};render() {const { loadings } = this.state;return (<div><>{/*<Space style={{ width: '100%' }}><Button type="primary" loading>Loading</Button><Button type="primary" size="small" loading>Loading</Button><Button type="primary" icon={<PoweroffOutlined />} loading /></Space>*/}{/* <Space style={{ width: '100%' }}><Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>Click me!</Button><Buttontype="primary"icon={<PoweroffOutlined />}loading={loadings[1]}onClick={() => this.enterLoading(1)}>Click me!</Button><Buttontype="primary"icon={<PoweroffOutlined />}loading={loadings[2]}onClick={() => this.enterLoading(2)}/></Space>*/}<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>Click me!</Button><DatePicker defaultValue={moment('2018-06-12', 'YY-MM-DD')}onChange={onChange} picker="day"allowClear={false}/></></div>);}
}export default App;/*class App extends PureComponent {constructor(props) {super(props);this.state = {isActive: true}}render() {const {isActive} = this.statelet isBar = trueconst errClass = 'error'const warnClass = nullreturn (<div>{/!*  原生React中添加class的方法  *!/}<h2 className={'foo bar active title'}>我是标题1</h2><h2 className={'title ' + (isActive ? 'active' : '')}>我是标题2</h2><h2 className={['title', (isActive ? 'active' : '')].join(" ")}>我是标题3</h2>{/!*  使用classnames库动态添加class  *!/}<h2 className={'foo bar active title'}>我是标题4</h2><h2 className={classNames('foo', 'bar', 'active', 'title')}>我是标题5</h2><h2 className={classNames({'active': isActive, 'bar': isBar}, 'title')}>我是标题6</h2><h2 className={classNames('foo', errClass, warnClass, {'active': isActive})}>我是标题7</h2><h2 className={classNames(['active', 'title'])}>我是标题8</h2><h2 className={classNames(['active', 'title'], {'bar': isBar})}>我是标题9</h2></div>);}
}*/