test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Card new feat (#7120)

Browse Source 
* inner style Card

* support `cover` `actions` `avatar` `description` and `extraContent`

* improve

* refactor
This commit is contained in:
ddcat1115 2017-08-09 14:34:10 +08:00 committed by GitHub
parent c8eec8c56f
commit 2b1bed42c9
10 changed files with 963 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/card/Meta.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import classNames from 'classnames';
export interface CardMetaProps {
prefixCls?: string;
style?: React.CSSProperties;
className?: string;
avatar?: React.ReactNode;
title?: React.ReactNode;
description?: React.ReactNode;
}
export default (props: CardMetaProps) => {
const { prefixCls = 'ant-card', className, avatar, title, description, ...others } = props;
const classString = classNames(`${prefixCls}-meta`, className);
const avatarDom = avatar ? <div className={`${prefixCls}-meta-avatar`}>{avatar}</div> : null;
const titleDom = title ? <div className={`${prefixCls}-meta-title`}>{title}</div> : null;
const descriptionDom = description ?
<div className={`${prefixCls}-meta-description`}>{description}</div> : null;
const MetaDetail = titleDom || descriptionDom ?
<div className={`${prefixCls}-meta-detail`}>
{titleDom}
{descriptionDom}
</div> : null;
return (
<div {...others} className={classString}>
<div className={`${prefixCls}-meta-content`}>
{avatarDom}
{MetaDetail}
</div>
</div>
);
};

767
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5,36 +5,40 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
class="ant-card ant-card-bordered"
style="width:300px;"
>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
<div>
<div
class="ant-card-head"
>
Card title
</h3>
</div>
<div
class="ant-card-extra"
>
<a
href="#"
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-extra"
>
More
</a>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
<a
href="#"
>
More
</a>
</div>
<div
class="ant-card-body"
>
<div>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
`;
@ -47,27 +51,31 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
class="ant-card"
style="width:300px;"
>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
<div>
<div
class="ant-card-head"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
@ -77,59 +85,63 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
<div
class="ant-card ant-card-bordered ant-card-no-hovering ant-card-contain-grid"
>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
卡片标题
</h3>
</div>
<div
class="ant-card-body"
>
<div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
class="ant-card-head"
>
卡片内容
<h3
class="ant-card-head-title"
>
卡片标题
</h3>
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
class="ant-card-body"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
<div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
<div
class="ant-card-grid"
style="width:25%;text-align:center;"
>
卡片内容
</div>
</div>
</div>
</div>
</div>
@ -150,19 +162,23 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div
class="ant-card"
>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
<div>
<div
class="ant-card-head"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
Card content
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
</div>
</div>
</div>
@ -173,19 +189,23 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div
class="ant-card"
>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
<div>
<div
class="ant-card-head"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
Card content
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
</div>
</div>
</div>
@ -196,19 +216,115 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div
class="ant-card"
>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
<div>
<div
class="ant-card-head"
>
Card title
</h3>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
Card content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/card/demo/inner.md correctly 1`] = `
<div
class="ant-card ant-card-bordered ant-card-no-hovering"
>
<div>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
<p
style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight:500;"
>
Group title
</p>
<div
class="ant-card ant-card-bordered ant-card-no-hovering ant-card-type-inner"
>
<div>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
Inner Card title
</h3>
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
<div
class="ant-card-body"
>
<div>
Inner Card content
</div>
</div>
</div>
</div>
<div
class="ant-card-body"
class="ant-card ant-card-bordered ant-card-no-hovering ant-card-type-inner"
style="margin-top:16px;"
>
Card content
<div>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
Inner Card title
</h3>
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
<div
class="ant-card-body"
>
<div>
Inner Card content
</div>
</div>
</div>
</div>
</div>
</div>
@ -221,101 +337,195 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
class="ant-card ant-card-loading ant-card-bordered"
style="width:34%;"
>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div>
<div
class="ant-card-loading-content"
class="ant-card-head"
>
<p
class="ant-card-loading-block"
style="width:94%;"
/>
<p>
<span
<h3
class="ant-card-head-title"
>
Card title
</h3>
</div>
<div
class="ant-card-body"
>
<div
class="ant-card-loading-content"
>
<p
class="ant-card-loading-block"
style="width:28%;"
style="width:94%;"
/>
<span
class="ant-card-loading-block"
style="width:62%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:22%;"
/>
<span
class="ant-card-loading-block"
style="width:66%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:56%;"
/>
<span
class="ant-card-loading-block"
style="width:39%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:21%;"
/>
<span
class="ant-card-loading-block"
style="width:15%;"
/>
<span
class="ant-card-loading-block"
style="width:40%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:28%;"
/>
<span
class="ant-card-loading-block"
style="width:62%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:22%;"
/>
<span
class="ant-card-loading-block"
style="width:66%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:56%;"
/>
<span
class="ant-card-loading-block"
style="width:39%;"
/>
</p>
<p>
<span
class="ant-card-loading-block"
style="width:21%;"
/>
<span
class="ant-card-loading-block"
style="width:15%;"
/>
<span
class="ant-card-loading-block"
style="width:40%;"
/>
</p>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/card/demo/meta.md correctly 1`] = `
<div
class="ant-card ant-card-bordered"
style="width:300px;"
>
<div>
<div
class="ant-card-body"
>
<div>
<div
class="ant-card-cover"
>
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
</div>
<div
class="ant-card-meta"
>
<div
class="ant-card-meta-content"
>
<div
class="ant-card-meta-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
</div>
<div
class="ant-card-meta-detail"
>
<div
class="ant-card-meta-title"
>
Card title
</div>
<div
class="ant-card-meta-description"
>
This is the description
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul
class="ant-card-actions"
>
<li
style="width:33.333333333333336%;"
>
<span>
<i
class="anticon anticon-setting"
/>
</span>
</li>
<li
style="width:33.333333333333336%;"
>
<span>
<i
class="anticon anticon-edit"
/>
</span>
</li>
<li
style="width:33.333333333333336%;"
>
<span>
<i
class="anticon anticon-ellipsis"
/>
</span>
</li>
</ul>
</div>
`;
exports[`renders ./components/card/demo/no-padding.md correctly 1`] = `
<div
class="ant-card ant-card-bordered"
style="width:240px;"
>
<div
class="ant-card-body"
style="padding:0;"
>
<div>
<div
class="custom-image"
class="ant-card-body"
style="padding:0;"
>
<img
alt="example"
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
width="100%"
/>
</div>
<div
class="custom-card"
>
<h3>
Europe Street beat
</h3>
<p>
www.instagram.com
</p>
<div>
<div
class="custom-image"
>
<img
alt="example"
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
width="100%"
/>
</div>
<div
class="custom-card"
>
<h3>
Europe Street beat
</h3>
<p>
www.instagram.com
</p>
</div>
</div>
</div>
</div>
</div>
@ -326,18 +536,135 @@ exports[`renders ./components/card/demo/simple.md correctly 1`] = `
class="ant-card ant-card-bordered"
style="width:300px;"
>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
<div>
<div
class="ant-card-body"
>
<div>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
<div
class="ant-card ant-card-bordered"
style="width:300px;"
>
<div>
<div
class="ant-card-head"
>
<h3
class="ant-card-head-title"
>
Card title
</h3>
<div
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-line"
>
<div
class="ant-tabs-bar"
role="tablist"
tabindex="0"
>
<div
class="ant-tabs-nav-container"
>
<span
class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
unselectable="unselectable"
>
<span
class="ant-tabs-tab-prev-icon"
/>
</span>
<span
class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
unselectable="unselectable"
>
<span
class="ant-tabs-tab-next-icon"
/>
</span>
<div
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav-scroll"
>
<div
class="ant-tabs-nav ant-tabs-nav-animated"
>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
<div
aria-disabled="false"
aria-selected="true"
class="ant-tabs-tab-active ant-tabs-tab"
role="tab"
>
tab1
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
tab2
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-tabs-content ant-tabs-content-animated"
style="margin-left:0%;"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
</div>
</div>
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
<div
class="ant-card-body"
>
<div>
<p>
content1
</p>
</div>
</div>
</div>
</div>
`;

48
components/card/demo/inner.md Normal file
View File

@ -0,0 +1,48 @@
---
order: 7
title:
zh-CN: 内部卡片
en-US: Inner card
---
## zh-CN
可以放在普通卡片内部，展示多层级结构的信息。
## en-US
It can be placed inside the ordinary card to display the information of the multilevel structure.
````jsx
import { Card } from 'antd';
ReactDOM.render(
<Card noHovering 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>
, mountNode);
````

33
components/card/demo/meta.md Normal file
View File

@ -0,0 +1,33 @@
---
order: 9
title:
zh-CN: 支持更多内容配置
en-US: Support more content configuration
---
## zh-CN
一种支持封面、头像、标题和描述信息的卡片。
## en-US
A Card that supports `cover`, `avatar`, `title` and `description`.
````jsx
import { Card, Icon, Avatar } from 'antd';
const { Meta } = Card;
ReactDOM.render(
<Card
style={{ width: 300 }}
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
, mountNode);
````

57
components/card/demo/tabs.md Normal file
View File

@ -0,0 +1,57 @@
---
order: 8
title:
zh-CN: 带页签的卡片
en-US: With tabs
---
## zh-CN
可承载更多内容。
## en-US
More content can be hosted.
````jsx
import { Card } from 'antd';
const tabList = [{
key: 'tab1',
tab: 'tab1',
}, {
key: 'tab2',
tab: 'tab2',
}];
const contentList = {
tab1: <p>content1</p>,
tab2: <p>content2</p>,
};
class TabsCard extends React.Component {
state = {
key: 'tab1',
}
onTabChange = (key) => {
this.setState({ key });
}
render() {
return (
<Card
style={{ width: 300 }}
title="Card title"
extra={<a href="#">More</a>}
tabList={tabList}
onTabChange={this.onTabChange}
>
{contentList[this.state.key]}
</Card>
);
}
}
ReactDOM.render(
<TabsCard />
, mountNode);
````

17
components/card/index.en-US.md
View File

@ -25,8 +25,13 @@ A card can be used to display content related to a single subject. The content c
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
| bordered | Toggles rendering of the border around the card | boolean | true |
| bodyStyle | Inline style to apply to the card content | object | - |
| noHovering | Whether to be disable hovering when mouse over | boolean | false |
| noHovering | Whether to be disable hovering when mouse over | boolean | false, and is set to true when [type='inner'] |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
| type | Card style type, can be set to `inner` or not set | string | - |
| cover | Card cover | ReactNode | - |
| actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - |
| tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - |
| onTabChange | Callback when tab is switched | (key) => void | - |
### Card.Grid
@ -34,3 +39,13 @@ Property | Description | Type | Default
---------|-------------|------|---------
className | className of container | string | -
style | style object of container | object | -
### Card.Meta
Property | Description | Type | Default
---------|-------------|------|---------
className | className of container | string | -
style | style object of container | object | -
avatar | avatar or icon | ReactNode | -
title | title content | ReactNode | -
description | description content | ReactNode | -

120
components/card/index.tsx
View File

@ -1,9 +1,19 @@
import React, { Component, Children } from 'react';
import classNames from 'classnames';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import omit from 'omit.js';
import Grid from './Grid';
import Meta from './Meta';
import Tabs from '../tabs';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
export type CardType = 'inner';
export interface CardTabListType {
key: string;
tab: React.ReactNode;
}
export interface CardProps {
prefixCls?: string;
title?: React.ReactNode;
@ -16,10 +26,16 @@ export interface CardProps {
children?: React.ReactNode;
id?: string;
className?: string;
type?: CardType;
cover?: React.ReactNode;
actions?: Array<React.ReactNode>;
tabList?: CardTabListType[];
onTabChange?: (key: string) => void;
}
export default class Card extends Component<CardProps> {
static Grid: typeof Grid = Grid;
static Meta: typeof Meta = Meta;
container: HTMLDivElement;
resizeEvent: any;
updateWiderPaddingCalled: boolean;
@ -54,6 +70,11 @@ export default class Card extends Component<CardProps> {
});
}
}
onTabChange = (key) => {
if (this.props.onTabChange) {
this.props.onTabChange(key);
}
}
saveRef = (node: HTMLDivElement) => {
this.container = node;
}
@ -66,67 +87,98 @@ export default class Card extends Component<CardProps> {
});
return containGrid;
}
getAction(actions) {
if (!actions || !actions.length) {
return null;
}
const actionList = actions.map((action, index) => (
<li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
<span>{action}</span>
</li>
),
);
return actionList;
}
render() {
const {
prefixCls = 'ant-card', className, extra, bodyStyle, noHovering,
title, loading, bordered = true, ...others,
prefixCls = 'ant-card', className, extra, bodyStyle, noHovering, title, loading,
bordered = true, type, cover, actions, tabList, children, ...others,
} = this.props;
let children = this.props.children;
const classString = classNames(prefixCls, className, {
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-no-hovering`]: noHovering,
[`${prefixCls}-no-hovering`]: noHovering || (type === 'inner' && noHovering === undefined),
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
[`${prefixCls}-type-${type}`]: !!type,
});
if (loading) {
children = (
<div className={`${prefixCls}-loading-content`}>
<p className={`${prefixCls}-loading-block`} style={{ width: '94%' }} />
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '28%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '62%' }} />
</p>
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '22%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '66%' }} />
</p>
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '56%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '39%' }} />
</p>
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '21%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '15%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '40%' }} />
</p>
</div>
);
}
const loadingBlock = (
<div className={`${prefixCls}-loading-content`}>
<p className={`${prefixCls}-loading-block`} style={{ width: '94%' }} />
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '28%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '62%' }} />
</p>
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '22%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '66%' }} />
</p>
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '56%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '39%' }} />
</p>
<p>
<span className={`${prefixCls}-loading-block`} style={{ width: '21%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '15%' }} />
<span className={`${prefixCls}-loading-block`} style={{ width: '40%' }} />
</p>
</div>
);
let head;
if (!title) {
const tabs = tabList && tabList.length ? (
<Tabs className={`${prefixCls}-head-tabs`} onChange={this.onTabChange}>
{tabList.map(item => <Tabs.TabPane tab={item.tab} key={item.key} />)}
</Tabs>
) : null;
if (!title && !tabs) {
head = null;
} else {
head = typeof title === 'string' ? (
<div className={`${prefixCls}-head`}>
<h3 className={`${prefixCls}-head-title`}>{title}</h3>
{tabs}
</div>
) : (
<div className={`${prefixCls}-head`}>
<div className={`${prefixCls}-head-title`}>{title}</div>
{tabs}
</div>
);
}
return (
<div {...others} className={classString} ref={this.saveRef}>
const extraDom = extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null;
const coverDom = cover ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
const mainContent = (
<div>
{head}
{extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
<div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
{extraDom}
<div className={`${prefixCls}-body`} style={bodyStyle}>
{loading ? loadingBlock : <div>{coverDom}{children}</div>}
</div>
</div>
);
const actionDom = actions && actions.length ?
<ul className={`${prefixCls}-actions`}>{this.getAction(actions)}</ul> : null;
const divProps = omit(others, [
'onTabChange',
]);
return (
<div {...divProps} className={classString} ref={this.saveRef}>
{mainContent}
{actionDom}
</div>
);
}

17
components/card/index.zh-CN.md
View File

@ -26,8 +26,13 @@ cols: 1
| extra | 卡片右上角的操作区域 | string\|ReactNode | - |
| bordered | 是否有边框 | boolean | true |
| bodyStyle | 内容区域自定义样式 | object | - |
| noHovering | 取消鼠标移过浮起 | boolean | false |
| noHovering | 取消鼠标移过浮起 | boolean | false，[type='inner'] 时默认为 true |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
| cover | 卡片封面 | ReactNode | - |
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - |
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |
| onTabChange | 页签切换的回调 | (key) => void | - |
### Card.Grid
@ -35,3 +40,13 @@ Property | Description | Type | Default
---------|-------------|------|---------
className | 网格容器类名 | string | -
style | 定义网格容器类名的样式 | object | -
### Card.Meta
Property | Description | Type | Default
---------|-------------|------|---------
className | 容器类名 | string | -
style | 定义容器类名的样式 | object | -
avatar | 头像/图标 | ReactNode | -
title | 标题内容 | ReactNode | -
description | 描述内容 | ReactNode | -

129
components/card/style/index.less
View File

@ -22,8 +22,6 @@
}
&-head {
height: @card-head-height;
line-height: @card-head-height;
background: @card-head-background;
border-bottom: @border-width-base @border-style-base @border-color-split;
padding: 0 @card-padding-base;
@ -31,14 +29,32 @@
&-title {
font-size: @font-size-lg;
display: inline-block;
height: @card-head-height;
line-height: @card-head-height;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
white-space: nowrap;
color: @card-head-color;
font-weight: 500;
}
.@{ant-prefix}-tabs {
margin-bottom: -17px;
margin-top: -8px;
// For align with extra
&:only-child {
margin-top: 0;
.@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
padding: 12px 20px;
}
}
&-bar {
border-bottom: @border-width-base @border-style-base @border-color-split;
}
}
}
&-extra {
@ -91,6 +107,53 @@
}
}
&-cover {
margin: -@card-padding-base -@card-padding-base 20px -@card-padding-base;
& > * {
width: 100%;
}
}
&-actions {
border-top: @border-width-base @border-style-base @border-color-split;
background: @card-actions-background;
align-items: center;
.clearfix;
& > li {
float: left;
text-align: center;
height: 16px;
margin: 12px 0;
color: @text-color-secondary;
& > span {
display: inline-block;
font-size: 14px;
cursor: pointer;
height: 32px;
line-height: 32px;
min-width: 32px;
position: relative;
top: -8px;
&:hover {
color: @primary-color;
transition: color .3s;
}
& > .anticon {
font-size: 16px;
}
}
&:not(:last-child) {
border-right: @border-width-base @border-style-base @border-color-split;
}
}
}
&-wider-padding &-head {
padding: 0 @card-padding-wider;
}
@ -103,6 +166,10 @@
right: @card-padding-wider;
}
&-wider-padding &-cover {
margin: -@card-padding-base -@card-padding-wider 20px -@card-padding-wider;
}
&-padding-transition &-head,
&-padding-transition &-body {
transition: padding .3s;
@ -111,6 +178,60 @@
&-padding-transition &-extra {
transition: right .3s;
}
&-type-inner &-head {
padding: 0 @card-padding-base;
background: @background-color-base;
&-title {
height: @card-inner-head-height;
line-height: @card-inner-head-height;
}
}
&-type-inner &-body {
padding: 16px @card-padding-base;
}
&-type-inner &-extra {
right: @card-padding-base;
}
&-meta {
&-content {
margin: 20px 0 0;
.clearfix;
}
&-avatar {
padding-right: 16px;
float: left;
}
&-detail {
float: left;
position: relative;
& > div:not(:last-child) {
margin-bottom: 8px;
}
}
&-title {
font-size: @font-size-lg;
display: inline-block;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
white-space: nowrap;
color: @card-head-color;
font-weight: 500;
}
&-desscription {
color: @text-color-secondary;
}
}
}
@keyframes card-loading {

2
components/style/themes/default.less
View File

@ -332,6 +332,8 @@
@card-head-height: 48px;
@card-head-color: @heading-color;
@card-head-background: @component-background;
@card-inner-head-height: 46px;
@card-actions-background: @background-color-base;
// Tabs
// ---