Card 卡片

卡片组件用于将信息进行分组展示，可以包含标题、内容和页脚，是一种常见的信息容器组件。卡片通常用于展示产品信息、文章摘要、用户资料等内容，提供了一种清晰的信息分组方式。

基础卡片

基础卡片包含标题、内容和页脚，可以满足大多数基本使用场景。

使用 title 属性设置卡片标题，使用 footer 属性设置卡片页脚，默认插槽用于设置卡片内容。

这是卡片的内容区域，可以放置任何内容。

卡片组件是一种常见的信息容器，用于分组展示相关信息。

复制代码
显示代码

卡片阴影

卡片组件提供了三种不同的阴影显示方式，满足不同的设计需求。

通过 shadow 属性设置卡片阴影的显示时机，可选值为 always、hover 或 never。

shadow="always"，卡片始终显示阴影效果

shadow="hover"，鼠标悬停时显示阴影效果

shadow="never"，卡片不显示阴影效果

复制代码
显示代码

自定义标题

除了使用 title 属性设置标题外，还可以使用具名插槽自定义标题内容。

使用 title 插槽可以自定义标题区域的内容，实现更复杂的标题设计。

通过 title 插槽可以自定义卡片的标题区域，实现更复杂的标题设计。

可以在标题中添加图标、按钮或其他组件。

复制代码
显示代码

自定义页脚

与标题类似，页脚也支持通过具名插槽进行自定义。

使用 footer 插槽可以自定义页脚区域的内容。

通过 footer 插槽可以自定义卡片的页脚区域，添加按钮或其他交互元素。

复制代码
显示代码

卡片宽度

可以通过设置 width 属性来控制卡片的宽度。

默认情况下，卡片宽度为 100%，可以通过 width 属性设置为固定宽度。

通过设置 width 属性可以控制卡片的宽度。

这个卡片的宽度被设置为 300px。

也可以使用百分比设置卡片宽度。

这个卡片的宽度被设置为 50%。

默认情况下，卡片宽度为 100%。

复制代码
显示代码

Card 属性

属性名	说明	类型	可选值	默认值
title	卡片标题	String	—	—
footer	卡片页脚	String	—	—
shadow	卡片阴影显示时机	String	always / hover / never	always
width	卡片宽度	String	—	100%

Card 事件

事件名	说明	回调参数
mouseenter	鼠标移入卡片时触发	event: MouseEvent
mouseleave	鼠标移出卡片时触发	event: MouseEvent

Card 插槽

插槽名	说明
default	卡片内容
title	卡片标题
footer	卡片页脚

Card 卡片 ​

基础卡片 ​

卡片阴影 ​

自定义标题 ​

自定义页脚 ​

卡片宽度 ​

Card 属性 ​

Card 事件 ​

Card 插槽 ​