Skip to content

Card 卡片

基础用法

设置 title 增加标题,设置 subtitle 增加副标题,设置 content 增加内容。如果设置普通字符串不能满足页面,可以使用插槽来替代上述的属性。

类型

使用 type 属性来定义卡片的样式,可选属性有 elevatedtonaloutlinedflat。默认情况下为 elevated

悬停浮起

设置 hover 属性为 true,鼠标悬停到卡片上时,卡片会悬浮。

加载状态

设置 loading 属性为 true,卡片上方会出现进度条。

卡片大小

提供三个快速调整宽度的属性 widthminWidthmaxWidth

媒体

将图片地址传入 media 属性,可在卡片顶部显示一些图片作为背景,以此突出卡片。在复杂情况下,可以使用 slots.media 插槽来自定义内容。

展开收起

让你的卡片展示更加直观,当用户需要查看详情时,才展开卡片内容。设置 expand 属性 false,则进行内容收起,反之则展开。也可以搭配 slots.footer 插槽使用。

Card API

属性

属性名说明类型默认值是否必填
type纸片样式elevated/tonal/outlined/flatelevatedNo
width卡片宽度String/Number-No
minWidth卡片最小宽度String/Number-No
maxWidth卡片最大宽度String/Number-No
title标题。可使用插槽自定义String-No
subtitle副标题。可使用插槽自定义String-No
content内容。可使用插槽自定义String-No
media媒体内容。插槽自定义String-No
hover鼠标移过时可浮起Boolean-No
loading加载中状态BooleanfalseNo
expand内容是否展开BooleantrueNo

插槽

插槽名说明作用域参数
default自定义内容-
title自定义标题-
subtitle自定义标题-
media自定义媒体内容-
header自定义头部内容-
footer自定义底部内容-