@txdfe/at-card-cover

at-card-cover

---

简介

AT 卡片封面组件，有全图、大图、小图三种形式，根据传入的属性来决定最终展示。

API

提供使用 type dataSource 和 其他属性：

属性	类型	可选值	默认值	说明
type	String	fillPic bigPic smallPic	bigPic	卡片封面的类型，全图、大图、小图
dataSource	Object	noop	null	基础数据，包含title(标题)、subTitle(副标题)、desc(描述)、back(图片)、extra(ReactNode)、name(名字)
user	Array	noop	null	用于提供UsersAvatar需要的数据
tag	Object	noop	null	需要有type，value两组数据
buttons	Array	noop	[]	小图中展示的button，每一项为object，包含key、type、value,

代码示例：

import { Icon } from '@txdfe/at';
import CardCover from '@txdfe/at-card-cover';

const bigpic = 'https://teambition-file.alibaba-inc.com/thumbnail/011g89ee043c04d33e90ce2450e6536a0106/w/600/h/300';

const dataSource = {
  title: 'title',
  subTitle: 'subTitle',
  desc: 'dejfdklsjflkdjkls',
  back: bigpic,
  extra: <Icon type="star-fill" style={{ color: '#ffaf38' }} />,
};

const user = [{
  id: 1,
  nickname: '小小',
  name: '吴彦祖',
  avatarUrl: 'https://work.alibaba-inc.com/photo/xxxxxx.jpg',
}];

const tag = {
  type: 'normal',
  value: 'Tag'
};

const buttons = [
  {
    key: 1,
    type: 'primary',
    value: '按钮'
  },
  {
    key: 2,
    type: 'normal',
    value: '按钮'
  },
];

const classess = [ 'classname1', 'classname2' ];

class Demo extends React.Component {
  render() {
    return (
      <div>
        <h4>全图</h4>
        <CardCover type="fillPic" dataSource={dataSource} tag={tag} className="classname1" />
        <h4>大图1</h4>
        <CardCover type="bigPic" dataSource={dataSource} user={user} className="classname1" />
        <h4>大图2</h4>
        <CardCover type="bigPic" dataSource={dataSource} />
        <h4>小图1</h4>
        <CardCover type="smallPic" dataSource={dataSource} buttons={buttons} tag={tag} />
        <h4>小图2</h4>
        <CardCover type="smallPic" dataSource={dataSource} tag={tag} />
        <h4>默认不传type</h4>
        <CardCover dataSource={dataSource} />
      </div>
    );
  }
}