ant-design/components/card/Meta.tsx
ddcat1115 2b1bed42c9 Card new feat (#7120)
* inner style Card

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

* improve

* refactor
2017-08-09 14:34:10 +08:00

34 lines
1.1 KiB
TypeScript

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>
);
};