四、数据展示组件(1)

四、数据展示

1、Avatar头像

用来代表用户或事物，支持图片、图标或字符展示

何时使用：需要用头像的时候

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

<1>onError事件: 表示图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为.可选值：无；默认值： -；类型： () => boolean。

(1)<Avatar>组件对应属性: 当然Avatar组件里面依然是可以放文字的，放的文字会展示在头像里面。如<Avatar>USER</Avatar>,则头像里面展示的文字为USER

<1>icon: 表示设置头像里面的图标类型，可设为 Icon 的 type 或 ReactNode.可选值：无；默认值： -；类型： string | ReactNode。

<2>shape: 表示指定头像的形状.可选值：无；默认值： circle；类型： Enum{ ‘circle’, ‘square’ }。

<3>size: 表示设置头像的大小,头像有三种尺寸,也可以自己来指定头像大小.可选值：无；默认值： default；类型： number | Enum{ ‘large’, ‘small’, ‘default’ }。

如下：自己指定头像大小<Avatar shape="square" size={64} icon="user" />

<4>src: 表示图片类头像的资源地址.可选值：无；默认值： -；类型： string。

<5>srcSet: 表示设置图片类头像响应式资源地址.可选值：无；默认值： -；类型： string。

<6>alt: 表示图像无法显示时的替代文本.可选值：无；默认值： -；类型： string。

import React, { PureComponent } from 'react';
import { Avatar } from 'antd';
class demo extends PureComponent {
    render() {
      return (
      <div>
            <Avatar size={64} />
            <Avatar style={
   
   { backgroundColor: '#87d068' }} size="small" shape="square" icon="user" />
            <Avatar>USER</Avatar>
      </div>
    );
    }
  };
export default demo;

2、Badge徽标数

图标右上角的圆形徽标数字。就是出现消息提示时候的，右上角的东西

何时使用：一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

(1)<Badge>组件对应属性: badge组件里面可以包含其它组件，badge组件会出现在它包含的组件的右上角

<1>color: 表示组件样式为一个小圆点。并且这个color自定义小圆点的颜色和status用法类似，配合下面的text属性使用(text设置小圆点后面的文字).可选值：无；默认值： -；类型： string。

<2>count: 表示组件的样式,可以为数字也可以为其他的reactElement.可选值：无；默认值： -；类型： ReactNode。

count为数字：Badge组件样式为一个红色块，里面一个数字，数字为 0 时隐藏组件，数字大于 overflowCount 时显示的数字为 ${overflowCount}+，如overflowCount为99，count为100，则展示为99+。如：count={5}

count为其它的reactElement：Badge组件样式就为对应的reactElement。如: count={<Icon type="clock-circle" />}

<3>dot: 表示组件不展示数字，只显示一个小红点.可选值：无；默认值： false；类型： boolean。

<4>offset: 表示设置状态点的位置偏移，格式为 [x, y].可选值：无；默认值： -；类型： [number, number]。

<5>overflowCount: 表示展示封顶的数字值.可选值：无；默认值： 99；类型： number。

<6>showZero: 表示当count的数值为 0 时，是否展示 Badge.可选值：无；默认值：false；类型： boolean。

<7>status: 表示和上面那个dot差不多，样式也是一个小圆点，不过这个为状态点让小点出现对应的颜色，和上面的color用法类似；可以配合下面的text一起使用，让小圆点出现在文字的前面.可选值：无；默认值： -；类型： Enum{ ‘success’, 'processing, ‘default’, ‘error’, ‘warning’ }。

<8>text: 表示在设置了 status或者color 的前提下有效，设置小圆点后面的文本.可选值：无；默认值： -；类型： string。

<9>title: 表示设置鼠标放在状态点上时显示的文字.可选值：无；默认值： count；类型： string。

import React, { PureComponent } from 'react';
import { Badge, Icon } from 'antd';
class demo extends PureComponent {
  render() {return (<div><Badge count={5} overflowCount={1}><span>dsadasdasd</span></Badge>
        <Badge count={0} showZero><span>dasdasdadsa</span></Badge>
        <Badge dot><span>dsadasdasd</span></Badge>
        <Badge count={<Icon type="clock-circle" />}><span>dasdasdadsa</span></Badge></div>);}
        <Badge color="#0087FF" /> // 单独用Badge
        <Badge status="success"  text="Success22222222" />
        <Badge color="#2db7f5" text="#2db7f5" />
};
export default demo;

3、Comment评论

对网站内容的反馈、评价和讨论。

何时使用：评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。

(1)<Comment>组件对应属性:

<1>actions: 表示在评论内容下面呈现的内容列表。可以自定义为点赞按钮，回复按钮这些.可选值：无；默认值： -；类型： Array。

数组的每一项都可以是一个reactElement，而每一项也都代表一个单独的板块了。如：const actions = [<span key="comment-basic-like">dsadsadas</span>,<span key=' key="comment-basic-dislike"'>432</span>,<span key="comment-basic-reply-to">Reply to</span>,];

<2>author: 表示提交这条评论的用户的名字.可选值：无；默认值： -；类型： string|ReactNode。

<3>avatar: 表示提交这条评论的用户的头像。它的值通常是 antd Avatar组件或者一个图片的url.可选值：无；默认值： -；类型： string|ReactNode。

值为一个图片的url：avatar={"https://zos.alX.png"}

值为一个 Avatar组件： avatar={<Avatar src="https://zos.aX.png"/>}

<4>children: 表示当前评论的子评论，就放在children里面。子评论一般而言也是一个Comment组件.可选值：无；默认值： -；类型： string|ReactNode。

<5>content: 表示评论的主要内容。如果要弄一个上传评论的框框，也是在content里面写对应的组件。反正主要的内容都是在这个里面写.可选值：无；默认值： -；类型： string|ReactNode。

<6>datetime: 表示提交这条评论的时间.可选值：无；默认值： -；类型： string|ReactNode。

import React, { PureComponent } from 'react';
import { Comment, Avatar,Tooltip, Icon, Input } from 'antd';
import moment from 'moment';const {TextArea} = Input;
class demo extends PureComponent {
  render() {const actions = [<span key="comment-basic-like">dsadsadas</span>,<span key=' key="comment-basic-dislike"'>121</span>,<span key="comment-basic-reply-to">Reply to</span>,];
    const childrenComment = <Comment author={'Ha'}avatar={"https://zos.ali"}content={<TextArea rows={4} />}datetime={'2019-03-03'}/>;
    return (<Comment actions={actions} author={<a>Han Solo22</a>}avatar={<Avatarsrc="https://z"/>}content={<p>We sup</p>}
        datetime={<Tooltip title={moment().format('YY')}><span>{moment().fromNow()}</span></Tooltip>}children={childrenComment}/>);}
};
export default demo;

4、Collapse折叠面板

可以折叠/展开的内容区域。可以用来做内容摘要和内容详细

何时使用：<1>对复杂区域进行分组和隐藏，保持页面的整洁。<2>手风琴是一种特殊的折叠面板，只允许单个内容区域展开。

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

<1>onChange事件: 表示所有的子组件Collapse.Panel，点击展开或者关闭都会触发.可选值：无；默认值： -；类型： function(key)。

参数key：参数key在普通模式和accordion模式是不相同的。

普通模式key：为数组。表示当前所有展开的子组件Collapse.Panel的key值的数组

accordion模式key：为数字。表示当前展开的子组件Collapse.Panel的key值

(1)<Collapse>组件对应属性: 这个Collapse组件里面的每一项是Collapse.Panel组件

<1>activeKey: 表示当前激活 tab 面板的 key.可选值：无；默认值：默认无，accordion 模式下默认第一个元素；类型： string[]|string| number[]|number。

<2>defaultActiveKey: 表示初始化选中的，子组件Collapse.Panel对应的 key.可选值：无；默认值：无；类型： string[]|string| number[]|number。

<3>bordered: 表示组件样式为，带边框风格的折叠面板.可选值：无；默认值： true；类型： boolean。

<4>accordion: 表示手风琴模式，即在所有的子组件Collapse.Panel里面，同时只能展开一个Collapse.Panel.可选值：无；默认值： false；类型： boolean。

accordion:手风琴,像手风琴风箱一样折叠的。according to：根据，依照

<5>expandIcon: 表示自定义点击展开或者折叠的那个，箭头切换图标.可选值：无；默认值： -；类型： (panelProps) => ReactNode。

<6>expandIconPosition: 表示设置图标位置： left, right.可选值：无；默认值： -；类型： left。

<7>destroyInactivePanel: 表示销毁折叠隐藏的面板.可选值：无；默认值： false；类型： boolean。

(2)<Collapse>的子组件<Collapse.Panel>折叠面板对应属性: 这个组件就是Collapse组件里面具体的每一项内容。这个组件里面可以包含其它组件，包含的组件就是Collapse.Panel点击展开之后出现的内容

<1>disabled: 表示禁用后的面板展开与否将无法通过用户交互改变.可选值：无；默认值： false；类型： boolean。

<2>forceRender: 表示被隐藏时是否渲染 DOM 结构.可选值：无；默认值： false；类型： boolean。

<3>header: 表示面板头部的内容，即组件折叠之后，剩余的那部分内容.可选值：无；默认值： -；类型： string|ReactNode。

<4>key: 表示这个子组件对应的Key.可选值：无；默认值： -；类型： string|number。

<5>showArrow: 表示是否展示当前面板上的箭头切换图标。为false的话，虽然没用那个图标，但是依然可以通过点击header来进行展开或者折叠.可选值：无；默认值： true；类型： boolean。

<6>extra: 表示自定义渲染每个面板header处，右边的内容.可选值：无；默认值： -；类型： ReactNode。

import React, { PureComponent } from 'react';
import { Collapse, Avatar, Tooltip, Icon, Input } from 'antd';
import moment from 'moment';
const { Panel } = Collapse;
class demo extends PureComponent {
  render() {function callback(key) {}const text = `A dog `;
    return (<Collapse defaultActiveKey={['1']} onChange={callback} accordion bordered={false}
      expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}>
        <Panel header="This is panel header 1" key="1"><p>{text}</p></Panel>
        <Panel header="This is panel header 2" key="2" showArrow={false} extra={ <Icon type="setting"/>}><p>{text}</p></Panel></Collapse>);}
};
export default demo;

4、Carousel走马灯

旋转木马，一组轮播的区域。这个就是一个轮播图

何时使用：<1>当有一组平级的内容。。<2>当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。<3>常用于一组图片或卡片轮播。

(1)<Carousel>组件对应属性: 很重要的一点是，这个Carousel组件不能做最外层组件，必须包含在其它组件里面，不然会出bug;如：使用方法为<div><Carousel><span>1</span><div>2</div></Carousel/></div>。这个组件里面还可以包含其它的组件或者html元素；而Carousel组件里面的所有直接子元素，都会成为轮播图的其中一页

<1>afterChange: 表示轮播图页面切换之后的回调.可选值：无；默认值： -；类型： function(currentIndex)。

参数currentIndex：轮播图切换之后，当前所在的页面的序号。从0开始

<2>autoplay: 表示是否自动切换。好像没法设置自动切换的时间，只有是默认的时间.可选值：无；默认值： false；类型： boolean。

<3>beforeChange: 表示切换面板的回调.可选值：无；默认值： -；类型： function(from, to)。

<4>dotPosition: 表示轮播图上面翻页的那一排点的位置.可选值：top bottom left right；默认值： bottom；类型： string。

<5>dots: 表示是否显示面板指示点.可选值：无；默认值： true；类型： boolean。

<6>easing: 表示动画效果.可选值：无；默认值： linear；类型： string。

<7>effect: 表示轮播图切换的方式.可选值： scrollx, fade；默认值： scrollx；类型： string。

scrollx: 顺着dotPosition所在的位置，像翻页一样切换

fade: 当前页面先清晰度消失，然后后续页面清晰度出现

(2)<Carousel>组件``的dom元素对应的方法: 这些方法是在Carousel的dom元素上面调用的。而，调用这些方法是用refs来获取Carousel组件，然后直接调用下面的那些方法

<1>goTo: 表示切换到指定面板, dontAnimate = true 时，不使用动画.可选值：无；默认值： -；类型： function(slideNumber, dontAnimate)。

<2>next: 表示切换到下一面板.可选值：无；默认值： -；类型： function。

<3>prev: 表示切换到上一面板.可选值：无；默认值： -；类型： function。

import React, { PureComponent } from 'react';
import { Collapse, Carousel, Button, Icon, Input } from 'antd';
class demo extends PureComponent {
  clickNext() {this.refs.welcome.next();}
  render() {function onChange(currentIndex, b, c) {}
    return (<div><Button ref="welcome2" type="primary" shape="round" ghost onClick={()=>{this.clickNext()}}>next</Button>
      <Carousel ref="welcome" afterChange={onChange} dotPosition={'right'} autoplay={false} className={styles.go}>
        <div><h3>1</h3></div><div><h3>2</h3></div></Carousel></div>);}
};
export default demo;

5、Card卡片

通用卡片容器。这个是一个用来布局的容器组件，其它的一些小组件是可以放在这个card里面的。

何时使用：最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

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

<1>onTabChange事件: 表示页签切换的回调.可选值：无；默认值： -；类型： (key) => void。

(1)<Card>组件对应属性: Card组件里面可以包含其它的组件，被包含的组件会出现在Card组件的内容部分。Card组件的结构是 title - cover - 内容 - actions

<1>actions: 表示卡片操作组，位置在卡片底部。这个和comment组件的actions差不多的.可选值：无；默认值： -；类型： Array。

<2>activeTabKey: 表示当前激活页签的 key.可选值：无；默认值： -；类型： string。

<3>headStyle: 表示自定义标题区域样式.可选值：无；默认值： -；类型： object。

<4>bodyStyle: 表示内容区域自定义样式.可选值：无；默认值： -；类型： object。

<5>bordered: 表示是否有边框.可选值：无；默认值： true；类型： boolean。

<6>cover: 表示卡片封面。相当于Card的背景图片。不过会插入在Card组件包含的内容的最前面，把Card的内容往下面挤.可选值：无；默认值： -；类型： ReactNode。

<7>defaultActiveTabKey: 表示初始化选中页签的 key，如果没有设置 activeTabKey.可选值：无；默认值：第一个页签；类型： string。

<8>extra: 表示卡片右上角的操作区域，对应的内容.可选值：无；默认值： -；类型： string|ReactNode。

<9>hoverable: 表示鼠标移过时可浮起.可选值：无；默认值： false；类型： boolean。

<10>loading: 表示当卡片内容还在加载中时，可以用 loading 展示一个占位.可选值：无；默认值：false；类型： boolean。

<11>tabList: 表示页签标题列表.可选值：无；默认值： -；类型： Array<{key: string, tab: ReactNode}>。

<12>tabBarExtraContent: 表示tab bar 上额外的元素.可选值：无；默认值： -；类型： React.ReactNode。

<13>size: 表示card 的尺寸.可选值：无；默认值： default；类型： default | small。

<14>title: 表示卡片标题，样式为最上面那一行.可选值：无；默认值： -；类型： string|ReactNode。

<15>type: 表示卡片类型，可设置为 inner 或不设置.可选值：无；默认值： -；类型： string。

(2)<Card>的子组件<Card.Grid>卡片网格对应属性:

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

<2>hoverable: 表示鼠标移过时可浮起.可选值：无；默认值： true；类型： boolean。

<3>style: 表示定义网格容器类名的样式.可选值：无；默认值： -；类型： boolean。

(3)<Card>的子组件<Card.Meta>卡片元素对应属性: Card组件里面的一些内容，可以用这个组件来包含。这个Meta组件的样式感觉和评论组件的样式差不多

<1>avatar: 表示头像/图标.可选值：无；默认值： -；类型： ReactNode。

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

<3>description: 表示描述内容.可选值：无；默认值： -；类型： ReactNode。

<4>style: 表示定义容器类名的样式.可选值：无；默认值： -；类型： object。

<5>title: 表示标题内容.可选值：无；默认值： -；类型： ReactNode。

import React, { PureComponent } from 'react';
import { Card, Button,Icon } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {return (<div><Card title={<Button type='primary'>dsa</Button>} actions={[<Icon type="setting" key="setting" />,]}cover={<img alt="example" src="http.png" />} bordered={false} hoverable extra={<a href="#">More</a>} style={
   
   { width: 300 }}>
          <p>Card content</p><Card.Meta title="Europe Street beat" description="www.instagram.com" /></Card></div>);}
};
export default demo;

6、Calendar日历

按照日历形式展示数据的容器。

何时使用：当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。

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

<1>onPanelChange事件: 表示日期面板变化回调。月模式的时候，切换月份或者年份触发；年模式的时候切换年份触发.可选值：无；默认值： -；类型： function(date: moment, mode: string)。

date: 切换之后，当前所在的年份的月份的，最后一天的moment对象

mode: 当前的模式。year或者month

<2>onSelect事件: 表示点击选择日期回调.可选值：无；默认值： -；类型： function(date: moment）。

date: 如果是在year模式下选择月份，则选择的这个月份对应的日期还是为切换回month模式之后对应的那个日期

<3>onChange事件: 表示日期变化回调.可选值：无；默认值： -；类型： function(date: moment）。

(1)<Calendar>组件对应属性:

<1>dateCellRender: 表示自定义渲染日期单元格，返回的内容会被追加到单元格中。当前页面显示出来的所有日期单元格都会调用这个函数，页面没有显示出来的日期单元格不调用。在mode为month时调用.可选值：无；默认值： -；类型： function(date: moment): ReactNode。

<2>dateFullCellRender: 表示和上面的dateCellRender类似，都是自定义渲染日期单元格，不过返回的内容会覆盖整个单元格.可选值：无；默认值： -；类型： function(date: moment): ReactNode。

<3>defaultValue: 表示默认展示的日期.可选值：无；默认值：默认日期；类型： moment。

<4>disabledDate: 表示不可选择的日期。返回为true，代表这个日期值被禁用。当前页面显示出来的所有日期单元格都会调用这个函数，页面没有显示出来的日期单元格不调用.可选值：无；默认值： -；类型： (currentDate: moment) => boolean。

<5>fullscreen: 表示是否全屏显示。这个即改变日历的样式，默认情况全屏的时候每个日期都有格子的；如果这个值为false，那么日期格周围的边框会消失.可选值：无；默认值： true；类型： boolean。

<6>locale: 表示国际化配置.可选值：无；默认值：默认配置；类型： object。

<7>mode: 表示日历的模式.可选值：month/year；默认值： month；类型： string。

month: 日历是月模式，即日历上是根据每月的天数来显示的

year: 日历是年模式，即日历上是根据每年的月份来显示的

<8>monthCellRender: 表示自定义渲染月份单元格，返回的内容会被追加到单元格中。当前页面显示出来的所有月份单元格都会调用这个函数，页面没有显示出来的月份单元格不调用。在mode为year时调用.可选值：无；默认值： -；类型： function(date: moment): ReactNode。

<9>monthFullCellRender: 表示和上面的monthCellRender类似，都是自定义渲染月单元格，不过返回的内容会覆盖整个单元格.可选值：无；默认值： -；类型： function(date: moment): ReactNode。

<10>validRange: 表示设置可以显示的日期.可选值：无；默认值： -；类型： [moment, moment]。

<11>value: 表示当前选中的日期.可选值：无；默认值：当前日期；类型： moment。

<12>headerRender: 表示自定义头部内容。这个会替换掉原本日历头部的mode切换按钮这些.可选值：无；默认值： -；类型： (object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) => ReactNode。

value: 当前日期的moment对象

type: 这个即日历的mode。month或者year

import React, { PureComponent } from 'react';
import { Card, Button,Icon,Calendar } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {const props = {fullscreen: true,value: moment(),onPanelChange: (date, mode) => {},onSelect: (date) => {},
      disabledDate: (currentDate) => {let disable = false;if (new Date(currentDate._d).getTime() < new Date().getTime()) {disable = true;}return disable;},
      dateCellRender: (date) => {return 1;},monthCellRender: (date) => {return 233;}};return (<Calendar {...props} />);}
};
export default demo;

7、Descriptions描述列表

成组展示多个只读字段。

何时使用：常见于详情页的信息展示。

(1)<Descriptions>组件对应属性:

<1>title: 表示描述列表的标题，显示在最顶部.可选值：无；默认值：；类型： ReactNode。

<2>bordered: 表示是否展示边框.可选值：无；默认值：false；类型： boolean。

<3>column: 表示每一行可以包含几个Descriptions.Item。可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}.可选值：无；默认值： 3；类型： number。

<4>size : 表示设置列表的大小。可以设置为 middle 、small, 或不填（只有设置 bordered={true} 生效）.可选值：无；默认值： false；类型： default | middle | small。

<5>layout: 表示Item中label后面的内容的布局。Item的label的布局是不变的，都是横排布局.可选值：无；默认值： horizontal；类型： horizontal | vertical。

horizontal: 内容出现在label的水平后面

vertical: 内容出现在label的正下方

<6>colon: 表示配置 Descriptions.Item 的 colon 的默认值.可选值：无；默认值： true；类型： boolean。

(2)<Descriptions>的子组件<Descriptions.Item>列表项对应属性: 这个为Descriptions组件里面的每一项。里面可以包含其它组件和内容。Item中的内容会出现在label的右边或者下面。在Item上面设置style属性是无效的。并且这个Item的外层元素只能是Descriptions组件

<1>label: 表示当前item的label，即内容左边的部分，类似于input的label.可选值：无；默认值：；类型： ReactNode。

<2>span: 表示当前item占据的Descriptions的列数(这个列数是在Descriptions的column中定义的)。.可选值：无；默认值： 1；类型：number。

如果当前Item是Descriptions的最后一个Item，并且单独在最后一行，则设置span无效

如果当前Item是一行的最后一个Item，给这个Item设置的span，如果超出了这一行剩余的span总数，则设置的span无效

import React, { PureComponent } from 'react';
import { Descriptions, Badge } from 'antd';
class demo extends PureComponent {
    render() {
      return (
      <Descriptions title="User Info" bordered column={3} size='small' style={
   
   {marginTop: '30px', display: (isNeedEdit && !isPerson) ? 'block' : 'none'}}>
        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
        <Descriptions.Item label={<span className='ant-form-item-required'>发票金额:</span>}  span={3}> // 这个设置的span = 3，相当于设置的span = 2。因为这一行一共只有 3
              <Form.Item hasFeedback>
                {form.getFieldDecorator('invoicePrice',{
                  initialValue: undefined,
                  rules: [{required: true,message: '请输入发票金额'}],
                })(
                  <Input disabled={!isNeedInvoice} autoComplete="off" maxLength={30} allowClear placeholder='请输入发票金额' />
                )}
              </Form.Item>
        </Descriptions.Item>
        <Descriptions.Item label="Product" span={1}>Cloud Database</Descriptions.Item> // 这里设置的span=1无效，还是默认为占满整行。相当于 span = 3
      </Descriptions>
    );
    }
  };
export default demo;

8、Empty空状态

空状态时的展示占位图。即，没有查询出来数据的时候，显示这个东西

何时使用：<1>当目前没有数据时，用于显式的用户提示。<2>初始化场景时的引导创建流程。

(1)<Empty>组件对应属性:

<1>description: 表示自定义描述内容.可选值：无；默认值： -；类型： string | ReactNode。

<2>imageStyle: 表示图片样式.可选值：无；默认值： -；类型： CSSProperties 。

<3>image: 表示标签显示的图片，为 string 时表示自定义图片地址。.可选值：无；默认值： Empty.PRESENTED_IMAGE_DEFAULT ；类型： string | ReactNode。

import React, { PureComponent } from 'react';
import { Empty } from 'antd';
class demo extends PureComponent {
    render() {
      return (
        // <Empty />
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
    );
    }
  };
export default demo;

9、List列表

通用列表。

何时使用：最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

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

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

(1)<List>组件对应属性:

<1>bordered: 表示是否展示边框.可选值：无；默认值： false；类型： boolean。

<2>footer: 表示列表底部.可选值：无；默认值： -；类型： string|ReactNode。

<3>grid: 表示列表的栅格配置。和row，col差不多.可选值：无；默认值： -；类型： {column,gutter,xs,sm,md,lg,xl,xxl}。

column：表示每一个Item占据的列数，可选值.可选值：无；默认值： -；类型： number

gutter：表示栅格间隔.可选值：无；默认值：0；类型： number

<4>header: 表示列表头部.可选值：无；默认值： -；类型： string|ReactNode。

<5>itemLayout: 表示设置 List.Item 里面action和extra的位置.可选值：horizontal vertical；默认值： -；类型： string。

<6>loading: 表示当卡片内容还在加载中时，可以用 loading 展示一个占位.可选值：无；默认值： false；类型： boolean|object (更多) 。

<7>loadMore: 表示加载更多.可选值：无；默认值： -；类型： string|ReactNode。

<8>locale: 表示默认文案设置，目前包括空数据文案.可选值：无；默认值：emptyText: ‘暂无数据’；类型： object。

<9>pagination: 表示对应的 pagination 配置, 设置 false 不显示.可选值：无；默认值：false；类型： boolean|object

<10>size: 表示list 的尺寸.可选值：无；默认值： default；类型： default | middle | small。

<11>split: 表示是否展示分割线.可选值：无；默认值： true；类型： boolean。

<12>dataSource: 表示列表数据源。这个的值为一个数组.可选值：无；默认值： -；类型： any[]。

<13>renderItem: 表示对dataSource里面的每一项进行render操作，返回的ReactNode会插入到List组件的title下面，Item前面。dataSouce的每一项都会调用这个render函数.可选值：无；默认值： -；类型： item => ReactNode

item: 这个item为dataSource里面的每一项

(2)<List>的子组件<List.Item>列表项对应属性: 这个为List组件里面的每一项。里面可以包含其它组件和内容

<1>actions: 表示列表操作组。当itemLayout为vertical，action出现在Item的下面；当itemLayout设置为horizontal，action出现在Item的最右侧.可选值：无；默认值： -；类型： Array。

<2>extra: 表示Item的额外内容。当itemLayout为vertical，extra出现在Item的最右边；当itemLayout设置为horizontal，extra出现在Item里面内容的后面.可选值：无；默认值： -；类型： string|ReactNode。

(3)<List.Item>的子组件<List.Item.Meta>列表项元素对应属性: List.Item组件里面需要评论样式的元素，就可以嵌套这个组件

<1>avatar: 表示列表元素的图标.可选值：无；默认值： -；类型： ReactNode。

<2>description: 表示列表元素的描述内容.可选值：无；默认值： -；类型： string|ReactNode。

<3>title: 表示列表元素的标题.可选值：无；默认值： -；类型： string|ReactNode。

import React, { PureComponent } from 'react';
import { List, Typography,Button,Calendar } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {const data = [2,1];
    return (<div><Listheader={<div>Header</div>}footer={<div>Footer</div>}bordereddataSource={data}grid={
   
   { gutter: 1, column: 6 }}itemLayout={'vertical'}
      renderItem={item => (// <List.Item>//   <Typography.Text mark>[ITEM]</Typography.Text> {item}// </List.Item><div>{item}</div>)}>
      <List.Item actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}extra={'111'}>wdasdadsadsa</List.Item></List></div>);}
};
export default demo;

10、Popover气泡卡片

点击/鼠标移入元素，弹出气泡式的卡片浮层。和Tooltip、Popconfirm差不多的，不过Tooltip的弹出框只有title；而这个是弹出一个卡片，卡片上除了有title还可以有content

何时使用：<1>当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。<2>和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

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

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

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

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

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

(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。

import React, { PureComponent } from 'react';
import { Row, Popover, Button, Tooltip } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {return (<Popover content={'dsada'} title="Title"><span>dsadsa</span></Popover>);}
};
export default demo;

11、Statistic统计数值

展示统计数值。这个还是可以用的，还不错

何时使用：<1>当需要突出某个或某组数字时。<2>当需要展示带描述的统计类数据时使用。

(0)<Statistic>的子组件<Statistic.Countdown>倒数计秒组件对应的事件

<1>onFinish事件: 表示倒计时完成时触发.可选值：无；默认值： -；类型： () => void。

(1)<Statistic>组件对应属性:

<1>decimalSeparator: 表示设置小数点分隔符.可选值：无；默认值： .；类型： string。

<2>formatter: 表示自定义数值展示.可选值：无；默认值： -；类型： (value) => ReactNode。

<3>groupSeparator: 表示设置千分位标识符.可选值：无；默认值： ,；类型： string。

<4>precision: 表示设置精确到小数点后几位。如设置precision为3，则数值样式为100.000.可选值：无；默认值： -；类型： number。

<5>prefix: 表示设置数值的前缀.可选值：无；默认值： -；类型： string | ReactNode。

<6>suffix: 表示设置数值的后缀.可选值：无；默认值： -；类型： string | ReactNode。

<7>title: 表示数值的标题。标题的位置在数值的上面.可选值：无；默认值： -；类型： string | ReactNode。

<8>value: 表示数值内容。数值内容的位置在标题的下面.可选值：无；默认值： -；类型： string | number。

<9>valueStyle: 表示设置数值的样式。如valueStyle={ { color: '#3f8600' }}.可选值：无；默认值： -；类型： style。

(2)<Statistic>的子组件<Statistic.Countdown>倒数计秒组件对应属性: 这个

<1>format: 表示value与当前时间的差值时间，就根据这个来格式化展示在页面上，参考 moment.可选值：无；默认值： ‘HH:mm:ss’；类型： string。

<2>prefix: 表示设置数值的前缀.可选值：无；默认值： -；类型： string | ReactNode。

<3>suffix: 表示设置数值的后缀.可选值：无；默认值： -；类型： string | ReactNode。

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

<5>value: 表示倒计时的时间值。这个时间值会和当前时间做比较，然后显示出不同的样式.可选值：无；默认值： -；类型： number | moment。

value时间值小于当前时间: 则会把value显示在页面的样式样式重置为00:00:00；如：设置value={moment()},显示出来的样式为00:00:00

value时间值大于当前时间: 则页面上面显示出的时间样式为，value时间值与当前时间值的差值，然后这个差值在页面上呈现为倒计时不断减少。比如：设置为value={Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30} format="D 天 H 时 m 分 s 秒",则页面上显示的就是从48:00:30:000开始不断减少的倒计时

<6>valueStyle: 表示设置数值的样式.可选值：无；默认值： -；类型： style。

import React, { PureComponent } from 'react';
import { Row, Col,Button,Statistic,Icon } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {return (<Row gutter={16}><Statistic title="Active Users222" value={112893} prefix={<Icon type="like" />} valueStyle={
   
   { color: '#3f8600' }}/>
      <Statistic.Countdown title="Million Seconds" value={Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30} format="DD:HH:mm:ss:SSS" /></Row>);}
};
export default demo;

四、数据展示组件(1)

四、数据展示

1、Avatar头像

2、Badge徽标数

3、Comment评论

4、Collapse折叠面板

4、Carousel走马灯

5、Card卡片

6、Calendar日历

7、Descriptions描述列表

8、Empty空状态

9、List列表

10、Popover气泡卡片

11、Statistic统计数值

Guess you like