T-UVUE-UI1.0.0

Appearance

Card 卡片组件 ​

用于展示标题、副标题、标签和图片的卡片组件，支持自定义类名以增强样式控制。

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<template>
	<t-page title="卡片展示" class="p.30">
		<t-col class="tdb-tdr-mb.30-pt.10">
			<t-section title='基本用法演示'></t-section>
			<t-card>
				<t-text class="m.30">这是一个简单的卡片示例，展示了没有附加属性且不包含阴影效果的卡片样式。</t-text>
			</t-card>
		</t-col>
		<t-col class="tdb-tdr-mb.30-plr.20-pt.10">
			<t-section title='带有附加信息和主题的基本卡片' class="mb.20"></t-section>
			<t-card type='p' class="mb.30" title="默认卡片" tag="附加信息"></t-card>
			<t-card type='e' class="mb.30" title="默认卡片" tag="附加信息" effect='l'></t-card>
			<t-card type='s' class="mb.10" title="默认卡片" tag="附加信息" effect='p'></t-card>
		</t-col>

		<t-col class="tdb-tdr-mb.30-plr.20-pt.10">
			<t-section title='添加副标题和头像' class="mb.20"></t-section>
			<t-card class="mb.30" :src="src" type='s' title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
			<t-card class="mb.30" :src="src" type='p' title="主标题" sub-title="次级标题" tag="标签详情" effect='l'></t-card>
			<t-card class="mb.10" :src="src" type='' title="主标题" sub-title="次级标题" tag="标签详情"></t-card>
		</t-col>
		<t-col class="tdb-tdr-mb.30-plr.20-pt.10">
			<t-section title='展示封面图片' class="mb.20"></t-section>
			<t-card class="mb.10" type='p' effect='l'>
				<t-col class="w.100%-h.380-dx">
					<t-image class="w.100%-h.380-r.0" :src='src2'></t-image>
					<t-text class="da-db0-c.#ffffff-sfwb-fbsb-p.20">这是一个展示封面和操作栏的卡片实例</t-text>
				</t-col>
				<t-text class="pt.30-slh.50">此示例向您展示了如何使用封面插槽和操作栏插槽，以增强卡片的视觉效果和功能性。</t-text>
			</t-card>
		</t-col>
		<t-col class="tdb-tdr-mb.30-plr.20-pt.10">
			<t-section title='集成操作栏' class="mb.20"></t-section>
			<t-card class="mb.10" type='p' effect='l'>
				<t-col class="w.100%-h.380-dx">
					<t-image class="w.100%-h.380-r.0" :src='src2'></t-image>
					<t-text class="da-db0-c.#ffffff-sfwb-fbsb-p.20">这是一个展示封面和操作栏的卡片实例</t-text>
				</t-col>
				<t-text class="pt.30-slh.50">此示例向您展示了如何使用封面插槽和操作栏插槽，以增强卡片的视觉效果和功能性。</t-text>
				<t-line class="mtb.15"></t-line>
				<t-social-buttons :buttons="buttons" @click="socialClick"></t-social-buttons>
			</t-card>
		</t-col>
		<t-col class="tdb-tdr-mb.30-plr.20-pt.10">
			<t-section title='卡片+cell组合' class="mb.20"></t-section>
			<t-card class="mb.30" title="欢迎使用Tui" sub-title="Tui是一个强大的UI库，提供了丰富的组件和灵活的配置，助力开发者快速构建高质量的用户界面。">
				<t-cell icon='/static/tabbar/ui1.png' :border="true" title="欢迎使用Tui"></t-cell>
				<t-cell icon='/static/tabbar/ui1.png' :border="true" title="欢迎使用Tui"></t-cell>
				<t-cell icon='/static/tabbar/ui1.png' :border="true" title="欢迎使用Tui"></t-cell>
				<t-cell icon='/static/tabbar/ui1.png' :border="true" title="欢迎使用Tui"></t-cell>
			</t-card>
		</t-col>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				sty: ['padding-top:30rpx'],
				resUrl: '',
				src: '/static/image/avatar.jpeg',
				src2: '/static/image/D1.jpg',
				buttons: [{
					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,
				}] as UTSJSONObject[]
			}
		},
		methods: {
			socialClick(index : number, state : boolean) {
				if (index != 2) {
					this.buttons[index].set('selected', state)
				}
			}
		}
	}
</script>

Props ​

名称描述类型默认值可选值
src卡片图片的路径String''-
title卡片标题String''-
subTitle卡片副标题String''-
tag卡片标签String''-
imageClass卡片图片的额外类名String''-
headerClass卡片头的额外类名String''-
tagClass卡片标签的额外类名String''-
titleClass卡片标题的额外类名String''-
subTitleClass卡片副标题的额外类名String''-

Events ​

事件名描述回调参数版本
click卡片被点击时触发e: UniPointerEvent-

Slots ​

名称描述
default卡片内容插槽