mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 06:09:34 +08:00
40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
import React from 'react';
|
||
import classNames from 'classnames';
|
||
|
||
export default props => {
|
||
let { prefixCls = 'ant-card', className, children, extra, bodyStyle,
|
||
title, loading, bordered = true, ...other } = props;
|
||
const classString = classNames({
|
||
[prefixCls]: true,
|
||
[className]: !!className,
|
||
[`${prefixCls}-loading`]: loading,
|
||
[`${prefixCls}-bordered`]: bordered,
|
||
});
|
||
|
||
if (loading) {
|
||
children = (
|
||
<div>
|
||
<p>████████████████████████</p>
|
||
<p>██████ ███████████████████</p>
|
||
<p>██████████████ ██████████</p>
|
||
<p>█████ ██████ █████████████</p>
|
||
<p>███████████ ██████████ ███</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const head = title ? (
|
||
<div className={`${prefixCls}-head`}>
|
||
<h3 className={`${prefixCls}-head-title`}>{title}</h3>
|
||
</div>
|
||
) : null;
|
||
|
||
return (
|
||
<div {...other} className={classString}>
|
||
{head}
|
||
{extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
|
||
<div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
|
||
</div>
|
||
);
|
||
};
|