t-card

Card 卡片

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <!-- 基础卡片 -->
  <t-card 
    :icon="src" 
    title="主标题" 
    sub-title="次级标题" 
    tag="标签详情">
  </t-card>

  <!-- 不同主题 -->
  <t-card 
    class="mb-30" 
    :icon="src" 
    type="primary" 
    title="主标题" 
    sub-title="次级标题" 
    tag="标签详情">
  </t-card>

  <!-- 不同尺寸 -->
  <t-card 
    class="mb-30" 
    :icon="src" 
    size="large" 
    type="warning" 
    title="主标题" 
    sub-title="次级标题" 
    tag="标签详情">
  </t-card>

  <!-- 展示封面图片 -->
  <t-card class="mb-30 p-0">
    <view class="w-100% h-380 dr">
      <image class="w-100% h-380 r-0" src='/static/image/D1.jpg'></image>
      <text class="da db-0 c-#ffffff sfwb fbsb p-20">
        这是一个展示封面和操作栏的卡片实例
      </text>
    </view>
    <text class="ttl2 p-10 slh-50">
      此示例向您展示了如何使用封面插槽和操作栏插槽，以增强卡片的视觉效果和功能性。
    </text>
  </t-card>
</template>

<script setup>
const src = ref<string>('/static/image/avatar.jpeg')
</script>

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	''

Events

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

Slots

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