五、反馈组件

1、Alert警告提示

警告提示，展现需要关注的信息。

何时使用：<1>当某个页面需要向用户显示警告的信息时。。<2>非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

2、Drawer抽屉

屏幕边缘滑出的浮层面板。点击之后，从屏幕边缘滑出一个块，然后可以在这个块里面写很多的内容进去。这个和modal是差不多的，只不过是样式不一样而已。由于这个Drawer组件没有footer属性，所以如果想要设置Drawer底部的按钮需要自己去设置(一般就用position来搞)。

何时使用：<1>当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。。<2>当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

(0)<Drawer>组件对应的事件

<1>onClose事件: 表示点击遮罩层或右上角叉或取消按钮的回调.可选值：无；默认值： -；类型：function(e)

<2>afterVisibleChange事件: 表示切换抽屉时动画结束后的回调.可选值：无；默认值： -；类型： function(visible)

(1)<Drawer>组件对应属性: 这个组件可以包含其它组件，被包含的组件就会作为抽屉里面的内容。这个Drawer会出一个bug，好像是升级antd版本就可以了

<1>closable: 表示是否显示右上角的关闭按钮.可选值：无；默认值： true；类型：boolean

<2>destroyOnClose: 表示关闭时销毁 Drawer 里的子元素.可选值：无；默认值： false；类型：boolean

<3>getContainer: 表示指定 Drawer 挂载位置，这个挂载位置即表示Drawer组件的父元素是谁。默认body，即Drawer组件是在body里面打开的。如果设置这个值为false，则这个Drawer组件只在它的父元素里面打开，即只在父元素的范围里面生效。和modal组件一样，如果要在Drawer组件里面使用ref或者使用css，必须把这个值设置为false.可选值：无；默认值： ‘body’；类型：HTMLElement | () => HTMLElement | Selectors | false

<4>maskClosable: 表示点击蒙层是否允许关闭.可选值：无；默认值： true；类型：boolean

<5>mask: 表示是否展示遮罩.可选值：无；默认值： true；类型：boolean

<6>maskStyle: 表示遮罩样式.可选值：无；默认值： {}；类型：object

<7>style: 表示可用于设置 Drawer 最外层容器的样式，和 drawerStyle 的区别是作用节点包括 mask.可选值：无；默认值： -；类型：object

<8>drawerStyle: 表示用于设置 Drawer 弹出层的样式.可选值：无；默认值： -；类型：object

<9>headerStyle: 表示用于设置 Drawer 头部的样式.可选值：无；默认值： -；类型：object

<10>bodyStyle: 表示可用于设置 Drawer 内容部分的样式.可选值：无；默认值： -；类型：object

<11>title: 表示弹出的抽屉的标题.可选值：无；默认值： -；类型：string | ReactNode

<12>visible: 表示Drawer 是否可见.可选值：无；默认值： -；类型：boolean

<13>width: 表示宽度.可选值：无；默认值： 256；类型：string | number

<14>height: 表示高度, 在 placement 为 top 或 bottom 时使用.可选值：无；默认值： 256；类型：string | number

<15>className: 表示对话框外层容器的类名.可选值：无；默认值： -；类型：string

<16>zIndex: 表示设置 Drawer 的 z-index.可选值：无；默认值： 1000；类型：number

<17>placement: 表示弹出的抽屉的位置.可选值：无；默认值： ‘right’；类型：‘top’ | ‘right’ | ‘bottom’ | ‘left’

<18>keyboard: 表示是否支持键盘 esc 关闭.可选值：无；默认值： true；类型：boolean

import React, { PureComponent } from 'react';
import { Drawer, Button, Icon, Tooltip } from 'antd';
import moment from 'moment';
function demo {
  const drawerProps = {
    visible,
    width: '50%',
    title: 'drawerTitle',
    maskClosable: false,
    keyboard: false,
    closable: false,
    getContainer: false,
    bodyStyle: {
      paddingBottom: '53px', // 由于自己写了个底部按钮，并且用的是absolute，所以必须加上这个。不然高度看起来就很奇怪
    },
    onClose: () => {
      onClose();
    },
  };
  return (
      <Drawer {...drawerProps}>
      // 下面两个是渲染的 确定和 取消按钮。因为drawer默认是没有这两个按钮的。
        <Row
          type="flex"
          justify="end"
          gutter={20}
          style={
   
   {
                position: 'absolute',
                right: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
            }}
        >
          <Col><Button onClick={()=>{onClose()}}>取消</Button></Col>
          <Col><Button type='primary' onClick={()=>{saveIntelligentPush()}}>确定</Button></Col>
        </Row>
      </Drawer>
  );
};
export default demo;

3、Modal对话框

模态对话框。就是一个弹出框

何时使用：<1>需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。<2>另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。

(0)<Modal>组件对应的事件：下面两个都要按钮没有自定义的时候，才可以触发

<1>onCancel事件: 表示点击遮罩层或弹出框右上角叉或弹出框的取消按钮的回调.可选值：无；默认值： -；类型： function(e)

<2>onOk事件: 表示点击弹出框里面的确定按钮，的回调.可选值：无；默认值： -；类型： function(e)

(-1)<Modal>组件对应的事件

<1>onCancel事件: 表示取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭.可选值：无；默认值： -；类型： function(e)

<2>onOk事件: 表示点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭.可选值：无；默认值： -；类型： function(e)

(1)<Modal>组件对应属性: model组件里面的内容，就直接写在model标签里面。如：<Modal><p>Some contents...</p></Modal>。弹出框的title和最后的确定、取消按钮，下面和上面都是有一个分割线的

<1>afterClose: 表示Modal 完全关闭后的回调.可选值：无；默认值： -；类型：function

<2>bodyStyle: 表示直接设置Modal body的样式，可以直接用这个来清除modal body的padding.可选值：无；默认值： {}；类型：object

<3>cancelText: 表示取消按钮文字.可选值：无；默认值：取消；类型：string|ReactNode

<4>centered: 表示垂直居中展示 Modal.可选值：无；默认值： false；类型：Boolean

<5>closable: 表示是否显示右上角的关闭按钮.可选值：无；默认值： true；类型：boolean

<6>closeIcon: 表示自定义关闭图标.可选值：无；默认值： -；类型：ReactNode

<7>confirmLoading: 表示确定按钮 loading.可选值：无；默认值： -；类型：boolean

<8>destroyOnClose: 表示关闭时销毁 Modal 里的子元素。好像无效.可选值：无；默认值： false；类型：boolean

<9>footer: 表示弹出框底部的内容，可以用这个来自定义弹出框的底部。当不需要默认底部按钮时，可以设为 footer={null}.可选值：无；默认值：确定按钮和取消按钮；类型： string|ReactNode

<10>forceRender: 表示强制渲染 Modal.可选值：无；默认值： false；类型：boolean

<11>getContainer: 表示这个参数是很重要的。指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom。如果想要获取这个modal里面子元素的ref或者给它添加css，必须设置这个为false。如果不设置的话，只能获取到modal的ref，modal里面子元素的ref是获取不到的.可选值：无；默认值： document.body；类型：HTMLElement | () => HTMLElement | Selectors | false

<12>keyboard: 表示是否支持键盘 esc 关闭.可选值：无；默认值： true；类型：boolean

<13>mask: 表示是否展示遮罩.可选值：无；默认值： true；类型：Boolean

<14>maskClosable: 表示点击蒙层是否允许关闭。如果为true，则点击蒙层的时候则会调用onCancel.可选值：无；默认值： true；类型：boolean

<15>maskStyle: 表示遮罩样式.可选值：无；默认值： {}；类型：object

<16>okText: 表示确认按钮文字.可选值：无；默认值：确定；类型：string|ReactNode

<17>okType: 表示确认按钮类型.可选值：无；默认值： primary；类型：string

<18>okButtonProps: 表示自定义页脚的确定按钮的属性值，值和button组件一样的.可选值：无；默认值： -；类型：ButtonProps

okButtonProps={ { disabled: true }}

<19>cancelButtonProps: 表示自定义取消按钮的属性值，值和button组件一样的.可选值：无；默认值： -；类型：ButtonProps

<20>style: 表示可用于设置浮层的样式，调整浮层位置等.可选值：无；默认值： -；类型：object

如style={ { top: 20 }},为设置为距离页面上面20px

<21>title: 表示弹出框的标题，这个title会自动带上一个样式，即title下面出现一个分割线.可选值：无；默认值： -；类型： string|ReactNode

<22>visible: 表示弹出框是否可见，控制弹出框的显示和隐藏.可选值：无；默认值： -；类型：boolean

如果自定义了弹出框底部的确定按钮和取消按钮，要控制弹出框的隐藏，还是需要用这个visible来控制

<23>width: 表示宽度，设置为百分数宽度，需要用字符串来设置.可选值：无；默认值： 520；类型：string|number

width={'80%'},宽度为80%

<24>wrapClassName: 表示对话框外层容器的类名。这个属性是不需要的，如果想给modal添加类名，还是直接加哥className就好了.可选值：无；默认值： -；类型：string

<25>zIndex: 表示设置 Modal 的 z-index.可选值：无；默认值： 1000；类型：Number

(2)Modal对象的info()、success()、error()、warning()、confirm()函数的参数object对应的属性: 这些函数，默认是生成一个对应类型的modal，是用来快速生成简单弹出框的。以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

<1>autoFocusButton: 表示指定自动获得焦点的按钮.可选值：无；默认值： ok；类型：null|string: ok cancel

<2>cancelText: 表示设置 Modal.confirm 取消按钮文字.可选值：无；默认值：取消；类型：string

<3>centered: 表示垂直居中展示 Modal.可选值：无；默认值： false；类型：Boolean

<4>className: 表示容器类名.可选值：无；默认值： -；类型：string

<5>content: 表示内容.可选值：无；默认值： -；类型：string|ReactNode

<6>icon: 表示自定义图标.可选值：无；默认值：；类型： string|ReactNode

<7>mask: 表示是否展示遮罩.可选值：无；默认值： true；类型：Boolean

<8>maskClosable: 表示点击蒙层是否允许关闭.可选值：无；默认值： false；类型：Boolean

<9>okText: 表示确认按钮文字.可选值：无；默认值：确定；类型：string

<10>okType: 表示确认按钮类型.可选值：无；默认值： primary；类型：string

<11>okButtonProps: 表示ok 按钮 props.可选值：无；默认值： -；类型：ButtonProps

<12>cancelButtonProps: 表示cancel 按钮 props.可选值：无；默认值： -；类型：ButtonProps

<13>title: 表示标题.可选值：无；默认值： -；类型：string|ReactNode

<14>width: 表示宽度.可选值：无；默认值： 416；类型：string|number

<15>zIndex: 表示设置 Modal 的 z-index.可选值：无；默认值： 1000；类型：Number

import React, { PureComponent } from 'react';
import { Button,Modal } from 'antd';

class demo extends PureComponent {
  state = { visible: false };
  showModal = () => {this.setState({visible: true,});};
  handleOk = e => {this.setState({visible: false,});};
  handleCancel = e => {
      this.setState({visible: false,});
        Modal.confirm({ // 这个会直接创建一个弹窗，而不用使用modal标签
          title: '确定放弃当前编辑？',
          // content: 'Some descriptions',
          okText: '确认放弃',
          okType: 'danger',
          cancelText: '继续编辑',
          centered: true,
          onOk() {
            // console.log('OK');
            onClose();
          },
          // onCancel() {
          //   console.log('Cancel');
          // },
        });
  };
    render() {
      return (
        <div>
        <Button type="primary" onClick={this.showModal}>Open Modal</Button>
        <Modal title="Basic Modal" visible={this.state.visible} footer={null}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
        
        <Modal 
            visible={this.state.visible} 
            width="50%" 
            centered 
            maskClosable={false} 
            okText="导入车辆" 
            onOk={()=>{this.setState({visible:false});}} 
            onCancel={()=>{this.setState({visible:false,})}} 
            closeIcon={<div><span className={styles.cancelFont}>×</span></div>}
        >
              <Row type="flex" justify="center" style={
   
   {textAlign: 'center'}}><Col span={24}><b>提交成功</b></Col></Row>
        </Modal>
      </div>
    );
    }
  };
export default demo;

4、Message全局提示

全局展示操作反馈信息。就是一个弹出的提示，还挺好用的，可以用来替代alert

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

(1)<message>组件对应的success、error、info、warning、loading函数接收的参数: message.loading()就是一个转圈圈的样式，还是很好用的。这个函数的返回值为一个关闭函数，调用这个关闭函数，就可以关闭当前的message弹窗

<1>content: 表示提示内容.可选值：无；默认值： -；类型：string|ReactNode|config

<2>duration: 表示自动关闭的延时，单位秒。设为 0 时不自动关闭。.可选值：无；默认值： 3；类型：number

<3>onClose: 表示关闭时触发的回调函数.可选值：无；默认值： -；类型：Function

(2)<message>组件对应的destroy函数接收的参数: 这个就是关闭之前的message

// 方法如下
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) // 转圈圈

import React, { PureComponent } from 'react';
import { Button,message } from 'antd';
class demo extends PureComponent {
    render() {
      const info = () => {
        message.info('This is a normal message');
        message.success('This is a success message');
        message.error('This is an error message');
        message.warning('This is a warning message');
        message.warn('This is an error message');
        message.loading('This is a warning message');
        message.destroy();
        
        const hide = message.loading('Action in progress..', 0); // 创建一个一直旋转的 loading
        setTimeout(()=>{hide()}, 2500); // 延时 2500ms，然后调用对应的 hide函数，来删除对应的message
      };
      return (<Button type="primary" onClick={info}>Display normal message</Button>);
    }
  };
export default demo;

5、Notification通知提醒框

全局展示通知提醒信息。

何时使用：<1>较为复杂的通知内容。。<2>带有交互的通知，给出用户下一步的行动点。<3>系统主动推送。

6、Progress进度条

展示操作的当前进度。

何时使用：<1>当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；。<2>当需要显示一个操作完成的百分比时。

(0)<Progress>组件对应的事件

<1>事件: 表示.可选值：无；默认值： -；类型：

(1)<Progress>组件对应属性: 这个进度条一共有三层颜色，最下面一层为白色的底色(长度一直为100%)，中间一层为percent代表的蓝色，最上面一层为successPercent代表的红色

<1>type: 表示表示进度条的类型。详细见下面.可选值：line circle dashboard；默认值： line；类型： string。

<2>format: 表示格式化进度条对应的文本内容.可选值：无；默认值： percent => percent + ‘%’；类型： function(percent, successPercent)。

percent: 就是进度条对应的percent属性值

successPercent: 就是进度条对应的successPercent属性值

<3>percent: 表示整个进度条中间一层的进度.可选值：无；默认值： 0；类型： number。

<4>showInfo: 表示是否显示进度数值或状态图标。进度数值和状态图标都在进度条的最后.可选值：无；默认值： true；类型： boolean。

<5>status: 表示状态。这个状态表示的是percent层的颜色.可选值：success exception normal active(仅限 line)；默认值： normal；类型： string。

success: 这个就是percent为100时候的状态。Progress变为绿色

exception：就相当于error状态。Progress变为红色

normal：正常进度条。Progress为蓝色

active：这个表示进行中的进度条。Progress依然是蓝色，不过有个动态效果，有个白光一直在进度条上面动

<6>strokeLinecap: 表示进度条右边的样式.可选值：无；默认值： round；类型： Enum{ ‘round’, ‘square’ }。

round: 进度条percent结束点边缘，右边样式为半圆的

square: 进度条percent结束点边缘，右边样式为平的

<7>strokeColor: 表示percent进度条的的颜色。如果设置了successPercent，则这个属性失效.可选值：无；默认值： -；类型： string | Object。

这个Object就相当于一个渐变的颜色对象，和css3里面的annimation的一样的。如: strokeColor={ {"0": '#108ee9','50%': '#87d068','100%': 'red'}}

<8>successPercent: 表示已完成的分段百分比，整个进度条最上面一层的进度，用绿色表示.可选值：无；默认值： 0；类型： number。

<9>size: 表示进度条大小.可选值：small default；默认值： default；类型： string。

(2)<Progress>的type等于line条形的进度条对应属性:

<1>strokeWidth: 表示进度条线的宽度，单位 px.可选值：无；默认值： 10；类型： number。

(3)<Progress>的type等于circle圆形的进度条对应属性: 这个dashboard进度条的形状和circle进度条的形状是一样的，都是圆形。不过，circle进度条是从圆的0°开始顺时针转的；dashboard是从圆的180°开始顺时针转的

<1>width: 表示圆形进度条的直径长度，单位 px.可选值：无；默认值： 132；类型： number。

<2>strokeWidth: 表示圆形进度条线的宽度，单位是进度条画布宽度的百分比.可选值：无；默认值： 6；类型： number。

(4)<Progress>的type等于dashboard仪表盘形的进度条对应属性: 这个dashboard进度条的形状和circle进度条的形状是一样的，都是圆形。不过，circle进度条是从圆的0°开始顺时针转的；dashboard是从圆的180°开始顺时针转的

<1>width: 表示仪表盘进度条画布宽度，单位 px.可选值：无；默认值： 132；类型： number。

<2>strokeWidth: 表示仪表盘进度条线的宽度，单位是进度条画布宽度的百分比.可选值：无；默认值： 6；类型： number。

<3>gapDegree: 表示仪表盘进度条缺口角度，可取值 0 ~ 360.可选值：无；默认值： 0；类型： number。

<4>gapPosition: 表示仪表盘进度条缺口位置.可选值：无；默认值： top；类型： Enum{ ‘top’, ‘bottom’, ‘left’, ‘right’ }。

import React, { PureComponent } from 'react';
import { Progress, Timeline, Icon, Tooltip } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {function formatIt(percent, successPercent) {return '%';}
    return (<div><Progress percent={30} successPercent={45} size="small"/><Progress type="dashboard" percent={90} status="active"/>
    <Progress type="circle" width={100} percent={10}  status="success" format={formatIt}/>
    <Progress percent={50} showInfo={false}  strokeLinecap="square" strokeColor={
   
   {"0": '#108ee9','50%': '#87d068','100%': 'red'}}/></div>);}
};
export default demo;

7、Popconfirm气泡确认框

点击元素，弹出气泡式的确认框。和Popover、Tooltip差不多的，不过Tooltip的弹出框只有title；而这个还是弹出一个卡片，卡片上除了有title还有确认按钮和取消按钮

何时使用：目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和 confirm 弹出的全屏居中模态对话框相比，交互形式更轻量。

(0)<Popover><Tooltip><Popconfirm>组件共享的对应的事件

<1>onVisibleChange事件: 表示弹出框显示，或者弹出框隐藏的回调.可选值：无；默认值： -；类型： (visible) => void。

(-1)<Popconfirm>组件对应的事件

<1>onCancel事件: 表示点击取消按钮的回调.可选值：无；默认值： -；类型： function(e)。

<2>onConfirm事件: 表示点击确认按钮的回调.可选值：无；默认值： -；类型： function(e)。

(1)<Popconfirm>组件对应属性: ToolTip组件可以包含其它的组件，其它的组件会显示在页面上

<1>cancelText: 表示取消按钮文字.可选值：无；默认值：取消；类型： string。

<2>okText: 表示确认按钮文字.可选值：无；默认值：确定；类型： string。

<3>okType: 表示确认按钮类型.可选值：无；默认值： primary；类型： string。

<4>title: 表示确认框的描述.可选值：无；默认值： -；类型： string|ReactNode 。

<5>icon: 表示自定义弹出气泡 Icon 图标。这个图标就是title确认框描述，前面的图标.可选值：无；默认值： <Icon type="exclamation-circle" />；类型： ReactNode。

<6>disabled: 表示点击 Popconfirm 子元素是否弹出气泡确认框.可选值：无；默认值： false；类型： boolean。

(2)<Popover><Tooltip><Popconfirm>组件共享的对应属性:

<1>arrowPointAtCenter: 表示箭头是否指向目标元素中心，[email protected]+ 支持.可选值：无；默认值： false；类型： boolean。

<2>autoAdjustOverflow: 表示气泡被遮挡时自动调整位置.可选值：无；默认值： true；类型： boolean。

<3>defaultVisible: 表示默认是否可见.可选值：无；默认值： false；类型： boolean。

<4>getPopupContainer: 表示浮层渲染父节点，默认渲染到 body 上.可选值：无；默认值： () => document.body；类型： Function(triggerNode)。

<5>mouseEnterDelay: 表示鼠标移入后延时多少才显示 Tooltip，单位：秒.可选值：无；默认值： 0.1；类型： number。

<6>mouseLeaveDelay: 表示鼠标移出后延时多少才隐藏 Tooltip，单位：秒.可选值：无；默认值： 0.1；类型： number。

<7>overlayClassName: 表示卡片类名.可选值：无；默认值： -；类型： string。

<8>overlayStyle: 表示卡片样式.可选值：无；默认值： -；类型： object。

<9>placement: 表示气泡框位置.可选值：top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom；默认值： top；类型： string。

<10>trigger: 表示触发弹出的事件.可选值：hover/focus/click/contextMenu；默认值： hover；类型： string。

<11>visible: 表示用于手动控制浮层显隐.可选值：无；默认值： false；类型： boolean。

<12>align: 表示该值将合并到 placement 的配置中，设置参考 rc-tooltip.可选值：无；默认值： -；类型： Object。

const deletePopConfirmText = (
          <div>
            确定要<b>删除</b>消息: <b>{record.title}</b>?
          </div>
);
<Popconfirm title={deletePopConfirmText} onConfirm={()=>{deleteGroupPush(record)}}>
                <Button type='link' size='small'>删除</Button>
</Popconfirm>

8、Result结果

用于反馈一系列操作任务的处理结果。

何时使用：当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

9、Spin加载中

用于页面和区块的加载中状态。就是显示一个转圈圈出来

何时使用：页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

(1)<Spin>组件对应属性: 可以把内容直接放到spin组件里面，当spinning属性为true的时候，然后整个里面的内容就都会显示为加载中状态

<1>delay: 表示延迟显示加载效果的时间（防止闪烁）.可选值：无；默认值： -；类型：number (毫秒)

<2>indicator: 表示自定义转圈圈的那个图标，自定义加载指示符.可选值：无；默认值： -；类型：ReactElement

<3>size: 表示组件大小，可选值为 small default large.可选值：无；默认值： ‘default’；类型：string

<4>spinning: 表示是否为加载中状态.可选值：无；默认值： true；类型：boolean

<5>tip: 表示当作为包裹元素时，转圈圈图标下面的文字.可选值：无；默认值： -；类型：string

<6>wrapperClassName: 表示包装器的类属性.可选值：无；默认值： -；类型：string

import React, { PureComponent } from 'react';
import { Spin,Alert,Switch,Icon } from 'antd';
class demo extends PureComponent {
  state = { loading: false };
  toggle = value => {
    this.setState({ loading: value });
  };
    render() {
      const antIcon = <Icon type="loading" style={
   
   { fontSize: 24 }} spin />;
      return (
        <div>
        <Spin tip="Loading...11" spinning={this.state.loading} indicator={antIcon}>
          <Alert
            message="Alert message title"
            description="Further details about the context of this alert."
            type="info"
          />
        </Spin>
        <div style={
   
   { marginTop: 16 }}>
          Loading state：
          <Switch checked={this.state.loading} onChange={this.toggle} />
        </div>
        
        // 根据
        <div style={
   
   {display: loading === true ? 'block' : 'none',position:'fixed',width:'100vw',height:'100%',top:0,left:0,cursor:'wait',zIndex: 999}}>
          <div style={
   
   {position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',}}><Spin spinning={loading} size="large" tip="" /></div>
        </div>
      </div>
    );
    }
  };
export default demo;

10、Skeleton骨架屏

在需要等待加载内容的位置提供一个占位图形组合。

何时使用：<1>网络较慢，需要长时间等待加载处理的情况下。<2>图文信息内容较多的列表/卡片中。<3>只在第一次加载数据的时候使用。<4>可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

五、反馈组件

五、反馈组件

1、Alert警告提示

2、Drawer抽屉

3、Modal对话框

4、Message全局提示

5、Notification通知提醒框

6、Progress进度条

7、Popconfirm气泡确认框

8、Result结果

9、Spin加载中

10、Skeleton骨架屏

猜你喜欢