React学习六（Ant Design of React）

---

      antd 是基于Ant Design设计体系的 React UI 组件库，主要用于研发企业级中后台产品，来自于“蚂蚁金服”。

一、特性

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

二、使用过程

1、安装

使用 npm 或 yarn 安装组件库

npm install antd --save
yarn add antd

安装图标库

npm install @ant-design/icons -s

2、antd引用

按需引入相关组件

import {
    Button } from 'antd';

引入样式（根据需要，例如在App.css文件中引入）

@import "~antd/dist/antd.css";

三、antd的组件库

官方网站：请点击

常用组件：

1、Button按钮

      按钮用于开始一个即时操作。
在 Ant Design 中提供了五种按钮：

①主按钮：用于主行动点，一个操作区域只能有一个主按钮。
②默认按钮：用于没有主次之分的一组行动点。
③虚线按钮：常用于添加操作。
④文本按钮：用于最次级的行动点。
⑤链接按钮：用于作为外链的行动点。

以及四种状态属性与上面配合使用。

①危险：删除/移动/修改权限等危险操作，一般需要二次确认。
②幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
③禁用：行动点不可用的时候，一般需要文案解释。
④加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

<Button type="" danger size={
   ""} disabled icon={
   < />} shape="">文本</Button>

type：按钮的类型，取值为primary、default、dashed、text、link
danger：表示危险按钮
size：表示按钮的大小,取值large、middle、small
disabled：表示按钮不可用
icon：设置按钮上的图标
shape：设置按钮的形状

2、message消息框

      可提供成功、警告和错误等反馈信息。顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

（1）Promise 接口

      可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。

success = () => {
   
    message
        .loading('加载中...',2.5)
        .then(()=>message.success('加载成功',2.5))
        .then(()=>message.info('加载已经完成',2.5))
}

（2）API

      组件提供了一些静态方法，使用方式和参数如下：

message.success(content, [duration], onClose)
message.error(content,[duration], onClose)
message.info(content, [duration], onClose)
message.warning(content, [duration], onClose)
message.loading(content,[duration], onClose)

参数	说明	类型	默认值
content	提示内容	ReactNode/config	-
duration	自动关闭的延时，单位秒。设为 0 时不自动关闭	number	3
onClose	关闭时触发的回调函数	function	-

（3）以对象的形式传递参数

message.open(config)
message.success(config)
message.error(config)
message.info(config)
message.warning(config)
message.loading(config)

      config 对象属性如下：

参数	说明	类型	默认值
className	自定义 CSS class	string	-
content	提示内容	ReactNode	-
duration	自动关闭的延时，单位秒。设为 0 时不自动关闭	number	3
icon	自定义图标	ReactNode	-
key	当前提示的唯一标志	string /number	-
style	自定义内联样式	CSSProperties	-
onClick	点击 message 时触发的回调函数	function	-
onClose	关闭时触发的回调函数	function	-

举例如下：

import React from 'react';
import {
    Button,message} from 'antd';
import {
    SearchOutlined,WechatOutlined,PoweroffOutlined} from '@ant-design/icons';

class ButtonDemo extends React.Component{
   
    test1= ()=>{
   
        message.info("普通消息")
    }
    test2= ()=>{
   
        message.success("成功消息")
    }
    test3= ()=>{
   
        message.warning("警告消息")
    }
    test4= ()=>{
   
        message.error("错误消息")
    }
    success= ()=>{
   
        message.loading('加载中...',2.5)
            .then(()=>message.success('AAAAAAA',2.5))
            .then(()=>message.info('BBBBB',2.5))
    }
    render() {
   
        return(
            <>
                <Button type="primary" danger onClick={
    this.test3 }>primary Button</Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button size={
   "middle"} disabled>default Button</Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button type="dashed" onClick={
   this.test1}>dashed Button</Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button type="text" onClick={
   this.test2}>text Button</Button>
                <br/><br/>
                <Button type="link" onClick={
   this.success}>link Button</Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button type="primary" icon={
   <SearchOutlined/>} onClick={
   this.test4}>link Button</Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button  icon={
   <WechatOutlined/>} shape="circle"></Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button  type="primary" icon={
   <PoweroffOutlined/>}>Loading</Button>
            </>
        )
    }
}

export default ButtonDemo;

App.js：

import logo from './logo.svg';
import './App.css';
import {
    BrowserRouter } from "react-router-dom";
import ButtonDemo from "./components/ButtonDemo";

function App() {
   
  return (
    <div className="App">
        <BrowserRouter>
            <ButtonDemo />
        </BrowserRouter>
    </div>
  );
}

export default App;

3、Menu组件

      为页面和功能提供导航的菜单列表。
      可以直接包含菜单项(Menu.Item)，也可以包含子菜单(SubMenu)，在子菜单下可以包含菜单项。

<Menu>
  <<