Tu View PlusCard 卡片
将信息聚合在卡片容器中展示。
基础用法
包含标题，内容和操作。
卡片标题
列表内容 1
列表内容 2
列表内容 3
列表内容 4
<template>
<tu-card title="卡片标题">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</template>
<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script><template>
<tu-card title="卡片标题">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</template>
<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script>简单卡片
卡片可以只有内容区域。Card 组件由 header 和 body 组成。 header 是可选的，其内容取决于一个具名的 slot。
列表内容 1
列表内容 2
列表内容 3
列表内容 4
<template>
<tu-card>
<div v-for="i in 4" :key="i" class="text item">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</template><template>
<tu-card>
<div v-for="i in 4" :key="i" class="text item">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</template>主题
Card 组件提供了五个不同的主题：outset、inset、bordered、outlined 和 flat。通过设置 effect 属性来改变主题，默认为 outset。
卡片标题
列表内容 1
列表内容 2
列表内容 3
列表内容 4
卡片标题
列表内容 1
列表内容 2
列表内容 3
列表内容 4
卡片标题
列表内容 1
列表内容 2
列表内容 3
列表内容 4
卡片标题
列表内容 1
列表内容 2
列表内容 3
列表内容 4
<template>
<tu-row :gutter="20">
<tu-col :span="6">
<tu-card title="卡片标题" effect="inset">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="卡片标题" effect="bordered">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="卡片标题" effect="outlined">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="卡片标题" effect="flat">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script><template>
<tu-row :gutter="20">
<tu-col :span="6">
<tu-card title="卡片标题" effect="inset">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="卡片标题" effect="bordered">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="卡片标题" effect="outlined">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="卡片标题" effect="flat">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script>有图片内容的卡片
可配置定义更丰富的内容展示。配置 body-style 属性来自定义 body 部分的 style ，此处还使用了布局组件。
欧洲风情街
欧洲风情街
欧洲风情街
<template>
<tu-row :gutter="20">
<tu-col :span="8">
<tu-card effect="up" body-style="padding: 0px">
<img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
<div style="padding: 14px">
<span>欧洲风情街</span>
</div>
</tu-card>
</tu-col>
<tu-col :span="8">
<tu-card effect="down" body-style="padding: 0px">
<img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
<div style="padding: 14px">
<span>欧洲风情街</span>
</div>
</tu-card>
</tu-col>
<tu-col :span="8">
<tu-card effect="line" body-style="padding: 0px">
<img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
<div style="padding: 14px">
<span>欧洲风情街</span>
</div>
</tu-card>
</tu-col>
</tu-row>
</template><template>
<tu-row :gutter="20">
<tu-col :span="8">
<tu-card effect="up" body-style="padding: 0px">
<img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
<div style="padding: 14px">
<span>欧洲风情街</span>
</div>
</tu-card>
</tu-col>
<tu-col :span="8">
<tu-card effect="down" body-style="padding: 0px">
<img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
<div style="padding: 14px">
<span>欧洲风情街</span>
</div>
</tu-card>
</tu-col>
<tu-col :span="8">
<tu-card effect="line" body-style="padding: 0px">
<img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
<div style="padding: 14px">
<span>欧洲风情街</span>
</div>
</tu-card>
</tu-col>
</tu-row>
</template>不同尺寸
Card 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的卡片尺寸。额外的尺寸： mini 、 small 、 large ，通过设置 size 属性来配置它们。
超小卡片
列表内容 1
列表内容 2
列表内容 3
列表内容 4
小型卡片
列表内容 1
列表内容 2
列表内容 3
列表内容 4
默认卡片
列表内容 1
列表内容 2
列表内容 3
列表内容 4
大型卡片
列表内容 1
列表内容 2
列表内容 3
列表内容 4
<template>
<tu-row :gutter="20">
<tu-col :span="6">
<tu-card title="超小卡片" size="mini">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="小型卡片" size="small">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="默认卡片">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="大型卡片" size="large">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script><template>
<tu-row :gutter="20">
<tu-col :span="6">
<tu-card title="超小卡片" size="mini">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="小型卡片" size="small">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="默认卡片">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
<tu-col :span="6">
<tu-card title="大型卡片" size="large">
<template #extra>
<tu-icon><Close /></tu-icon>
</template>
<div v-for="i in 4" :key="i">
{{ '列表内容 ' + i }}
</div>
</tu-card>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script>Card API
Card Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | String | - |
| extra | 右上角的操作区域 | String | - |
| body-style | 设置body样式 | Object | - |
| effect | 主题 | String | outset |
| size | 尺寸 | String | medium |
Card Slots
| 参数名 | 描述 |
|---|---|
| title | 标题 |
| extra | 右上角的操作区域 |
| default | 内容区域 |