mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-02 15:27:18 +00:00
74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import ConfigProvider from '../config-provider';
|
|
|
|
/**
|
|
* Card.Header
|
|
* @order 2
|
|
*/
|
|
class CardHeader extends Component {
|
|
static propTypes = {
|
|
prefix: PropTypes.string,
|
|
/**
|
|
* 卡片的标题
|
|
*/
|
|
title: PropTypes.node,
|
|
/**
|
|
* 卡片的副标题
|
|
*/
|
|
subTitle: PropTypes.node,
|
|
/**
|
|
* 标题区域的用户自定义内容
|
|
*/
|
|
extra: PropTypes.node,
|
|
/**
|
|
* 设置标签类型
|
|
*/
|
|
component: PropTypes.elementType,
|
|
className: PropTypes.string,
|
|
};
|
|
|
|
static defaultProps = {
|
|
prefix: 'next-',
|
|
component: 'div',
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
prefix,
|
|
title,
|
|
subTitle,
|
|
extra,
|
|
className,
|
|
component: Component,
|
|
...others
|
|
} = this.props;
|
|
|
|
return (
|
|
<Component
|
|
{...others}
|
|
className={classNames(`${prefix}card-header`, className)}
|
|
>
|
|
{extra && (
|
|
<div className={`${prefix}card-header-extra`}>{extra}</div>
|
|
)}
|
|
<div className={`${prefix}card-header-titles`}>
|
|
{title && (
|
|
<div className={`${prefix}card-header-title`}>
|
|
{title}
|
|
</div>
|
|
)}
|
|
{subTitle && (
|
|
<div className={`${prefix}card-header-subtitle`}>
|
|
{subTitle}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Component>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ConfigProvider.config(CardHeader);
|