四、数据展示组件(1)

最新推荐文章于 2022-03-01 17:56:09 发布

谁诉离殇~

最新推荐文章于 2022-03-01 17:56:09 发布

阅读量626

点赞数

分类专栏：框架(level 1) # React系列(level 2) # antd(level 3) 文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/rocktanga/article/details/121328655

版权

四、数据展示

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 = [dsadsadas,432,Reply to,];

<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)<Co

最低0.47元/天解锁文章

谁诉离殇~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四、数据展示组件(1)

四、数据展示1、Avatar头像用来代表用户或事物，支持图片、图标或字符展示何时使用：需要用头像的时候(0)<Avatar>组件对应的事件<1>onError事件: 表示图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为.可选值：无；默认值： -；类型： () => boolean。(1)<Avatar>组件对应属性: 当然Avatar组件里面依然是可以放文字的，放的文字会展示在头像里面。如&lt
复制链接

扫一扫