Skip to content

Card 卡片 ​

基础用法 ​

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

类型 ​

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

悬停浮起 ​

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

加载状态 ​

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

卡片大小 ​

提供三个快速调整宽度的属性 width、minWidth、maxWidth。

媒体 ​

将图片地址传入 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自定义底部内容-