54 lines
1.3 KiB
React
54 lines
1.3 KiB
React
import React from 'react';
|
||
import './Card.css';
|
||
|
||
/**
|
||
* Aurora Admin Card（React）
|
||
* 对齐 card.json 契约：
|
||
* - style: bordered | shadowed
|
||
* - padding: 16 | 24
|
||
* - section: title（含右侧 extra）/ content / actions
|
||
*/
|
||
export default function Card({
|
||
title = '',
|
||
bordered = false,
|
||
shadowed = false,
|
||
padding = 16,
|
||
className = '',
|
||
children,
|
||
extra,
|
||
actions
|
||
}) {
|
||
const paddingPx = typeof padding === 'number' ? `${padding}px` : padding;
|
||
const classes = [
|
||
'aa-card',
|
||
bordered ? 'aa-card--bordered' : '',
|
||
shadowed ? 'aa-card--shadowed' : '',
|
||
className
|
||
].filter(Boolean).join(' ');
|
||
|
||
return (
|
||
<div className={classes} style={{ padding: paddingPx }}>
|
||
{(title || extra) && (
|
||
<div className="aa-card__header">
|
||
<div className="aa-card__title">{title}</div>
|
||
{extra && <div className="aa-card__extra">{extra}</div>}
|
||
</div>
|
||
)}
|
||
<div className="aa-card__body">{children}</div>
|
||
{actions && <div className="aa-card__actions">{actions}</div>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/*
|
||
用法示例：
|
||
import Card from './Card';
|
||
|
||
<Card title="客户详情" extra={<a>查看全部</a>} shadowed padding={24}>
|
||
内容区...
|
||
</Card>
|
||
<Card title="操作卡片" bordered actions={<><button>取消</button><button>确定</button></>}>
|
||
内容区...
|
||
</Card>
|
||
*/
|