Card 卡片

通用卡片容器。

何时使用

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

代码演示

典型卡片

包含标题、内容、操作区域。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
ReactDOM.render(
  <Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>,
  document.getElementById('container'));
​

无边框

在灰色背景上使用无边框的卡片。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Card title="Card title" bordered={false} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>,
  document.getElementById('container'));
​

简洁卡片

只包含内容区域。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
ReactDOM.render(
  <Card style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>,
  document.getElementById('container'));
​

更灵活的内容展示

可以利用 Card.Meta 支持更灵活的内容。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
const { Meta } = Card;
​
ReactDOM.render(
  <Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
    <Meta title="Europe Street beat" description="www.instagram.com" />
  </Card>,
  document.getElementById('container'),
);
​

栅格卡片

在系统概览页面常常和栅格进行配合。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card, Col, Row } from 'choerodon-ui';
​
ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Row gutter={16}>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
    </Row>
  </div>,
  document.getElementById('container'));
​

预加载的卡片

数据读入前会有文本块样式。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
ReactDOM.render(
  <Card loading title="Card title" style={{ width: '34%' }}>
    Whatever content
  </Card>,
  document.getElementById('container'));
​

网格型内嵌卡片

一种常见的卡片内容区隔模式。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
const gridStyle = {
  width: '25%',
  textAlign: 'center',
};
​
ReactDOM.render(
  <Card title="Card Title">
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
  </Card>,
  document.getElementById('container'));
​

内部卡片

可以放在普通卡片内部，展示多层级结构的信息。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
ReactDOM.render(
  <Card title="Card title">
    <p
      style={{
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.85)',
        marginBottom: 16,
        fontWeight: 500,
      }}
    >
      Group title
    </p>
    <Card
      type="inner"
      title="Inner Card title"
      extra={<a href="#">More</a>}
    >
      Inner Card content
    </Card>
    <Card
      style={{ marginTop: 16 }}
      type="inner"
      title="Inner Card title"
      extra={<a href="#">More</a>}
    >
      Inner Card content
    </Card>
  </Card>,
  document.getElementById('container'));
​

带页签的卡片

可承载更多内容。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'choerodon-ui';
​
const tabList = [{
  key: 'tab1',
  tab: 'tab1',
}, {
  key: 'tab2',
  tab: 'tab2',
}];
​
const contentList = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
};
​
const tabListNoTitle = [{
  key: 'article',
  tab: 'article',
}, {
  key: 'app',
  tab: 'app',
}, {
  key: 'project',
  tab: 'project',
}];
​
const contentListNoTitle = {
  article: <p>article content</p>,
  app: <p>app content</p>,
  project: <p>project content</p>,
};
​
class TabsCard extends React.Component {
  state = {
    key: 'tab1',
    noTitleKey: 'app',
  }
​
  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
  }

支持更多内容配置

一种支持封面、头像、标题和描述信息的卡片。

import React from 'react';
import ReactDOM from 'react-dom';
import { Card, Icon, Avatar } from 'choerodon-ui';
​
const { Meta } = Card;
​
ReactDOM.render(
  <Card
    style={{ width: 300 }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <Icon key="setting" type="setting" />,
      <Icon key="edit" type="edit" />,
      <Icon key="ellipsis" type="ellipsis" />,
    ]}
  >
    <Meta
      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
      title="Card title"
      description="This is the description"
    />
  </Card>,
  document.getElementById('container'),
);
​

API

<Card title="卡片标题">卡片内容</Card>

Card

Card.Grid

Card.Meta