UniApp 组件 · 实验
UGCard 卡片
用于承载模块内容、信息摘要与操作区域的卡片容器。
组件预览
以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。
使用方式
配置 easycom 后直接使用 <ug-card>，无需在页面脚本中导入组件。
vue
<template>
<ug-card title="账户信息" description="保持资料真实、完整">
<ug-text>当前昵称：UG</ug-text>
<template #footer><ug-button block>编辑资料</ug-button></template>
</ug-card>
</template>
easycom 公开入口：@ug666/ui-uniapp/components/ug-card/ug-card.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | 'outline' | 'elevated' | 'muted' | 'outline' | 卡片的表面层级。 |
| padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | 内容内边距。 |
| title | string | — | 默认标题；可用 header 插槽完全替换。 |
| description | string | — | 默认标题说明。 |
事件
当前组件没有公开事件。
注意事项
- Card 只提供通用表面和 Anatomy，不内置业务字段。
- footer 插槽只在传入内容时生成底部区域。
平台边界
总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。
MP-WEIXIN 已编译
开发者工具与真机待验证