Tui Plus Vapor

# t-card

Card 卡片

t-card 组件介绍

t-card 用于展示标题、副标题、标签和图片的卡片组件，支持自定义类名以增强样式控制。卡片可以用于展示信息、操作栏、封面图等内容，是页面布局中常用的容器组件。

t-card 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-card 基础用法

基础用法参考 demo/card/card.uvue，通过 title、subTitle、tag 属性设置卡片内容，使用 icon 属性设置图标。

vue

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-section title='展示封面图片' class="mb-15" size="large"></t-section>
		<t-card class="mb-15 p-0">
			<view class="w-100% h-190 dr">
				<image class="w-100% h-190 r-0" src='/static/image/D1.jpg'></image>
				<text class="da db-0 c-#ffffff sfwb fbsb p-10">这是一个展示封面和操作栏的卡片实例</text>
			</view>
			<text :class="[`ttl2`,'p-5 slh-25']">此示例向您展示了如何使用封面插槽和操作栏插槽，以增强卡片的视觉效果和功能性。</text>
		</t-card>
		<t-section title='集成操作栏' class="mb-15"></t-section>
		<t-card class="mb-15">
			<view class="w-100% h-190 dr">
				<image class="w-100% h-190 r-0" src='/static/image/D1.jpg'></image>
				<text class="da db-0 c-#ffffff sfwb fbsb p-10">这是一个展示封面和操作栏的卡片实例</text>
			</view>
			<text :class="[`ttl2`,'p-5 slh-25']">此示例向您展示了如何使用封面插槽和操作栏插槽，以增强卡片的视觉效果和功能性。</text>
			<view :class="['ats-1.1 fl',`tpl`]">
				<view class="f fl fc" v-for="(item,index) in buttons" :key="index"
					@click="item.selected=!item.selected">
					<t-icon :type="item.selected?'error':''" class="mr-5"
						:name="item.selected?item.selectedIcon:item.icon"></t-icon>
					<text :class="[item.selected?`ttc-e`:'',`tfss`]">{{item.lable}}</text>
				</view>
			</view>
		</t-card>
		<t-section title='卡片+cell组合' class="mb-15"></t-section>
		<t-card class="mb-15 p-0" title="欢迎使用Tui" title-class="sfwb p-10" sub-title-class="slh-30 sls-5 ato-lt plr-10"
			sub-title="Tui是一个强大的UI库，提供了丰富的组件和灵活的配置，助力开发者快速构建高质量的用户界面。">

		</t-card>
		<t-section title='主题-type' class="mb-15"></t-section>
		<t-card :class="[`tvg`,'mb-15']" :icon="src" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='info' title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='warning' title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='primary' title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='error' title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='success' title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-section title='主题-effect' class="mb-15"></t-section>
		<t-card class="mb-15" :icon="src" type='info' title="主标题" effect="normal" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='warning' title="主标题" effect="dark" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='error' title="主标题" effect="light" sub-title="次级标题" tag="标签详情"></t-card>

		<t-section title='主题-size' class="mb-15"></t-section>
		<t-card class="mb-15" :icon="src" size="large" type="warning" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" size="medium" type="primary" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" size="small" type="error" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" size="mini" type="success" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>

		<t-section title='主题-type' class="mb-15"></t-section>
		<t-card class="mb-15" :icon="src" title="主标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='info' title="主标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='warning' title="主标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='primary' title="主标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='error' title="主标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='success' title="主标题" tag="标签详情"></t-card>
		<t-section title='主题-effect' class="mb-15"></t-section>
		<t-card class="mb-15" :icon="src" type='success' title="主标题" effect="normal" sub-title="次级标题"
			tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='success' title="主标题" effect="dark" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='success' title="主标题" effect="light" sub-title="次级标题"
			tag="标签详情"></t-card>
		<t-card class="mb-15" :icon="src" type='success' title="主标题" effect="plain" sub-title="次级标题"
			tag="标签详情"></t-card>

		<t-section title='主题-size' class="mb-15"></t-section>
		<t-card :class="[`tvg`,'mb-15']" :icon="src" size="large" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card :class="[`tvg`,'mb-15']" :icon="src" size="medium" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card :class="[`tvg`,'mb-15']" :icon="src" size="small" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		<t-card :class="[`tvg`,'mb-15']" :icon="src" size="mini" title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
	</view>
</template>

<script setup lang="uts">
	import { ref } from 'vue';
	type TypeButtonListItem = {
		selectedIcon : string;
		icon : string;
		lable : string;
		selected : boolean;
	}

	const resUrl = ref<string>('');
	const src = ref<string>('/static/image/avatar.jpeg');
	const src2 = ref<string>('/static/image/D1.jpg');
	const buttons = ref<TypeButtonListItem[]>([
		{
			selectedIcon: 'star-fill',
			icon: 'star',
			lable: '收藏',
			selected: true
		},
		{
			selectedIcon: 'thumb-up-fill',
			icon: 'thumb-up',
			lable: '点赞',
			selected: false
		},
		{
			selectedIcon: 'chat',
			icon: 'chat',
			lable: '评论',
			selected: false
		}
	]);

	function socialClick(index : number, state : boolean) {
		if (index != 2) {
			buttons.value[index].selected = state;
		}
	}
</script>

t-card Props

属性名	说明	类型	默认值
`size`	组件尺寸，可选 `large`、`medium`、`small`、`mini`	`string`	`'medium'`
`type`	组件主题类型，可选 `info`、`primary`、`error`、`warning`、`success`	`string`	`''`
`disabled`	是否禁用	`boolean`	`false`
`effect`	组件显示主题，可选 `normal`、`dark`、`light`、`plain`	`string`	`'normal'`
`hover`	是否启用点击效果	`boolean`	`true`
`path`	点击组件后跳转的页面路径；为空时仅响应事件	`string`	`''`
`icon`	卡片图标，支持图片地址和字体图标	`string`	`''`
`iconClass`	图标样式类，对应外部类 `icon-class`	`any`	`''`
`title`	标题	`string`	`''`
`titleClass`	标题样式类，对应外部类 `title-class`	`any`	`''`
`subTitle`	副标题	`string`	`''`
`subTitleClass`	副标题样式类，对应外部类 `sub-title-class`	`any`	`''`
`tag`	标签	`string`	`''`
`tagClass`	标签样式类，对应外部类 `tag-class`	`any`	`''`
`headerClass`	header 盒子的样式类，对应外部类 `header-class`	`any`	`''`

t-card Events

事件名	说明	回调参数
`click`	点击时触发	`UniPointerEvent`
`transitionend`	动画结束时触发	-
`initFinished`	组件初始化完成时触发，返回组件节点信息	`NodeInfo`
`touchstart`	触摸开始时触发	-
`touchend`	触摸结束时触发	-
`touchmove`	触摸移动时触发	-
`touchcancel`	触摸取消时触发	-

t-card Slots

插槽名	说明
`default`	默认插槽，用于自定义卡片内容

t-card 组件介绍 ​

t-card 平台兼容 ​

t-card 基础用法 ​

t-card Props ​

t-card Events ​

t-card Slots ​

t-card 组件介绍

t-card 平台兼容

t-card 基础用法

t-card Props

t-card Events

t-card Slots