Card 卡片

卡片用于承载一组相关信息，可展示标题、副标题、右上角额外内容与左侧缩略图，并提供边框、圆角、阴影与背景色配置。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-card 的用法，可按需组合。

<template>
  <mu-card title="标题">
    <text class="text">这是一个基础卡片，用于承载一组相关信息。</text>
  </mu-card>
</template>

标题

设置卡片头部左侧的标题文字。

<mu-card title="标题">
  <text class="text">这是一个基础卡片，用于承载一组相关信息。</text>
</mu-card>

副标题

在标题下方显示补充说明。

<mu-card title="项目名称" subtitle="副标题描述">
  <text class="text">带副标题的卡片。</text>
</mu-card>

右上角内容

在头部右侧显示额外内容。

<mu-card title="项目名称" extra="更多">
  <text class="text">右上角显示额外内容的卡片。</text>
</mu-card>

缩略图

在头部左侧显示缩略图。

<mu-card title="Mural Plus" subtitle="设计系统" thumb="/static/logo.png">
  <text class="text">头部左侧支持缩略图。</text>
</mu-card>

边框

控制是否显示卡片边框。

<mu-card title="无边框" :bordered="false">
  <text class="text">不显示边框的卡片。</text>
</mu-card>

圆角

默认为圆角卡片，设为 false 时显示直角。

<mu-card title="直角" :round="false">
  <text class="text">直角卡片</text>
</mu-card>

阴影

控制是否显示卡片阴影，默认关闭。

<mu-card title="阴影" :shadow="true">
  <text class="text">显示阴影的卡片。</text>
</mu-card>

背景色

设置卡片背景色，可使用主题变量或任意合法颜色。

<mu-card title="浅色背景" background="#F4F6FF" :bordered="false">
  <text class="text">自定义背景色</text>
</mu-card>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
title	卡片标题	string	-
subtitle	卡片副标题	string	-
extra	头部右侧额外内容	string	-
thumb	头部左侧缩略图地址	string	-
bordered	是否显示边框	boolean	true
round	是否为圆角卡片	boolean	true
shadow	是否显示阴影	boolean	false
background	卡片背景色	string	var(--mu-color-white, #FFFFFF)
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
click	点击卡片时触发	event: UniEvent

插槽

组件支持以下插槽。

名称	说明
header	自定义头部区域，设置后覆盖 title、subtitle、extra、thumb
default	卡片内容