HIsheR
23 lines
980 B
TypeScript
23 lines
980 B
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { CardProps } from './types.js';
|
|
|
|
/*** 卡片容器：可选标题行（含右侧操作区）+ 任意子内容 + 可选底部操作区，bordered / hoverable 控制外观 ***/
|
|
export function card(props: CardProps, ...children: unknown[]): HTMLElement {
|
|
const cls = `ua-card${props.bordered === false ? ' ua-card-borderless' : ''}${props.hoverable ? ' ua-card-hoverable' : ''}`;
|
|
const head = props.title || props.extra
|
|
? h(
|
|
'div',
|
|
{ class: 'ua-card-head' },
|
|
props.title ? h('h3', { class: 'ua-card-title' }, props.title) : h('span', {}), // 无标题时占位，保证操作区仍靠右
|
|
props.extra ? h('span', { class: 'ua-card-extra' }, props.extra) : null,
|
|
)
|
|
: null;
|
|
return h(
|
|
'div',
|
|
{ class: cls },
|
|
head,
|
|
...children,
|
|
props.footer ? h('div', { class: 'ua-card-foot' }, props.footer) : null, // 底部操作区：右对齐，仅传了才渲染
|
|
) as HTMLElement;
|
|
}
|