Card 卡片

常用于某个内容模块。

基础使用

• 如果标题简单可以直接设置 title 属性，也可以使用 <template #title> 插槽。
• 使用 <template #actions> 插槽定义右上角的按钮操作区。

查看代码

<template>
	<demo-container>
		<gov-card title="滕王阁序">
			<template #actions>
				<gov-link type="primary">操作按钮</gov-link>
			</template>
			豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
		</gov-card>
	</demo-container>
</template>

无顶部

只有内容区域的卡片。可以设置 contentStyle 修改容器样式。

查看代码

<template>
	<demo-container>
		<gov-card>
			<div style="font-size: 16px; line-height: 2em">
				<b>《短歌行》</b><i>王勃</i>
			</div>
			豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
		</gov-card>
	</demo-container>
</template>

控制阴影

可以设置阴影的交互场景。

查看代码

<template>
	<demo-container>
		<gov-card shadow="always"> 默认显示 </gov-card><br />
		<gov-card shadow="hover"> Hover 时显示 </gov-card><br />
		<gov-card shadow="never"> 从不显示 </gov-card>
	</demo-container>
</template>

Attributes

属性名	说明	类型	可选值	默认值
title	卡片标题	String	—	—
contentStyle	内容区域的样式	Object	—	—
shadow	阴影显示策略	String	always, hover, never	always

Slots

插槽名	说明	作用域插槽	内容
title	卡片标题内容	否	可以放置自定义的标题内容
actions	卡片头部操作区域	否	可以放置操作按钮或其他操作元素
default	卡片主要内容区域	否	放置卡片的主要内容