mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-04 09:15:16 +00:00
71 lines
1.8 KiB
JavaScript
71 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.BulletHeader
|
|
* @order 2
|
|
*/
|
|
class CardBulletHeader extends Component {
|
|
static propTypes = {
|
|
prefix: PropTypes.string,
|
|
/**
|
|
* 卡片的标题
|
|
*/
|
|
title: PropTypes.node,
|
|
/**
|
|
* 卡片的副标题
|
|
*/
|
|
subTitle: PropTypes.node,
|
|
/**
|
|
* 是否显示标题的项目符号
|
|
*/
|
|
showTitleBullet: PropTypes.bool,
|
|
/**
|
|
* 标题区域的用户自定义内容
|
|
*/
|
|
extra: PropTypes.node,
|
|
};
|
|
|
|
static defaultProps = {
|
|
prefix: 'next-',
|
|
showTitleBullet: true,
|
|
};
|
|
|
|
render() {
|
|
const { prefix, title, subTitle, extra, showTitleBullet } = this.props;
|
|
|
|
if (!title) return null;
|
|
|
|
const headCls = classNames({
|
|
[`${prefix}card-head`]: true,
|
|
[`${prefix}card-head-show-bullet`]: showTitleBullet,
|
|
});
|
|
|
|
const headExtra = extra ? (
|
|
<div className={`${prefix}card-extra`}>{extra}</div>
|
|
) : null;
|
|
|
|
return (
|
|
<div className={headCls}>
|
|
<div className={`${prefix}card-head-main`}>
|
|
<div className={`${prefix}card-title`}>
|
|
{title}
|
|
{subTitle ? (
|
|
<span className={`${prefix}card-subtitle`}>
|
|
{subTitle}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{headExtra}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ConfigProvider.config(CardBulletHeader, {
|
|
componentName: 'Card',
|
|
});
|