2023-08-21 15:36:10 +08:00

25 lines
809 B
TypeScript

import { cx, css } from '@emotion/css';
import styles from './panel.module.scss'
import React from 'react'
// 定义panel组件的属性类型
export interface PanelProps {
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
extra?: React.ReactNode;
title?: string;
noPadding?: boolean;
}
export const Panel: React.FC<PanelProps> = (props) => {
return (
<div className={styles.panel}>
<div className={styles.panelHeader}>
<h3 className={styles.panelTitle}>{props.title}</h3>
{props.extra && <div className={styles.panelExtra}>{props.extra}</div>}
</div>
<div className={cx(styles.panelBody, props.noPadding ? styles.noPadding : '')}>{props.children}</div>
</div>
)
}