Card 卡片

卡片组件，用于展示独立的内容区块。支持头部、主体、底部三个可选区域，并可选悬停上浮光晕效果。

何时使用：需要将相关信息组织在一个独立的视觉容器中时使用，如文章摘要、用户信息、产品卡片等。

基础用法

最简单的卡片只包含主体内容。

完整结构

通过三个插槽分别定义头部、主体和底部。

悬停效果

设置 hoverable 属性后，鼠标悬停时卡片会平滑上浮并透出主题色的月晕光效。

隐藏主体或底部区域

通过 hideBody 和 hideFooter 属性可分别控制主体或底部区域的渲染（不生成对应 DOM）。

改变根元素语义

通过 as 属性改变根元素标签，提升 HTML 语义化。支持 div、section、article、aside、li。

博客文章卡片示例

一个实际博客中常用的文章卡片布局，包含元数据、标题、描述和标签。

API

Props

属性	类型	默认值	说明
as	'div' | 'section' | 'article' | 'aside' | 'li'	'div'	根元素标签
hoverable	boolean	false	是否启用悬停上浮 + 月晕效果
hideBody	boolean	false	是否隐藏主体区域（默认插槽）
hideFooter	boolean	false	是否隐藏底部区域（footer 插槽）

Slots

名称	说明
header	卡片头部内容（可选）
default	卡片主体内容
footer	卡片底部内容（可选）

注意事项

• 卡片默认无边框、无圆角，符合 Moongate 的直角美学
• 悬停效果仅当 hoverable 为 true 时生效
• 头部和底部插槽为可选，不传则对应区域不会渲染
• 使用 hideBody 或 hideFooter 时，对应的 DOM 元素完全不会生成，适用于需要精确控制布局的场景
• hideBody 为 true 时，头部区域的底边与底部区域的顶边会一并去掉（此时两者不再与正文相邻，保留分隔线会出现悬空边）
• 若卡片内部包含多个可交互元素（如多个链接），请确保各元素的 z-index 或点击区域不冲突
• as 属性支持 div、section、article、aside、li 五种容器标签