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 /flat | elevated | No |
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 | 加载中状态 | Boolean | false | No |
expand | 内容是否展开 | Boolean | true | No |
插槽
插槽名 | 说明 | 作用域参数 |
---|---|---|
default | 自定义内容 | - |
title | 自定义标题 | - |
subtitle | 自定义标题 | - |
media | 自定义媒体内容 | - |
header | 自定义头部内容 | - |
footer | 自定义底部内容 | - |