Card 卡片

用于数据展示的卡片组件

基础用法

基础用法

测试

<template>
	<LiCard :style="{ maxWidth: '300px' }"> 测试 </LiCard>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

移入效果

使用show-type控制卡片是否使用移入效果

测试

测试

<template>
	<LiCard :style="{ maxWidth: '300px' }"> 测试 </LiCard>
	<LiCard :style="{ maxWidth: '300px' }" show-type="hover"> 测试 </LiCard>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

插槽

标题

测试

2023-05-10

标题

测试

2023-05-10

<template>
	<LiCard header="标题" footer="2023-05-10" :style="{ maxWidth: '300px' }">
		测试
	</LiCard>
	<LiCard header="标题" footer="2023-05-10" :style="{ maxWidth: '300px' }">
		<template #header> 标题 </template>
		<template #default> 测试 </template>
		<template #fotter> 2023-05-10 </template>
	</LiCard>
</template>
<script setup lang="ts"></script>
<style scope lang="scss"></style>

Card Attributes

参数	说明	类型	可选值	默认值
show-type	移入效果	string	none/hover	none

Card Slots

插槽名	说明
-	内容
header	头部
footer	顶部