TCard / 卡片

Card is the most versatile container for grouping content, actions, and information. Supports rich layout variants: background colors, images, ribbons, status bars, and link interactions. / 卡片是页面中最通用的容器模块，支持丰富的布局变体：背景色、图片、缎带、状态条和链接交互。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
`title`	`string`	—	Card title / 卡片标题
`subtitle`	`string`	—	Subtitle / 副标题
`bg`	`TablerColor`	—	Background color / 背景色
`textColor`	`TablerColor`	—	Text color / 文字色
`size`	`'sm' \| 'md' \| 'lg'`	—	Size (padding) / 尺寸
`borderless`	`boolean`	`false`	No border / 无边框
`stacked`	`boolean`	`false`	Stacked effect (double shadow) / 堆叠效果
`active`	`boolean`	`false`	Active state / 激活
`inactive`	`boolean`	`false`	Inactive state / 未激活
`noBody`	`boolean`	`false`	Remove `.card-body` wrapper / 取消 body 包裹
`onlyBody`	`boolean`	`false`	Merge title into body / 标题和内容合并在 body 中
`href`	`string`	—	Link URL
`to`	`RouteLocationRaw`	—	Router link
`linkRotate`	`boolean`	`false`	Hover rotate effect / 悬停旋转
`linkPop`	`boolean`	`false`	Hover lift effect / 悬停弹起
`statusColor`	`TablerColor`	—	Status bar color / 状态条颜色
`imgSrc`	`string`	—	Image URL
`imgPosition`	`'start' \| 'end' \| 'top' \| 'bottom'`	`'top'`	Image position / 图片位置
`ribbonColor`	`TablerColor`	—	Ribbon color / 缎带颜色

Slots / 插槽

Slot	Description / 说明
`default`	Main body content / 主体内容
`title`	Custom title (overrides `title` prop) / 自定义标题
`subtitle`	Custom subtitle / 自定义副标题
`header`	Custom header area / 自定义头部
`header-actions`	Header right-side actions / 头部右侧操作区
`footer`	Footer content / 页脚
`stamp`	Stamp decoration / 图章装饰
`ribbon`	Ribbon content / 缎带内容
`img`	Custom image content / 自定义图片

Basic Usage / 基础用法

vue

<script setup lang="ts">
import { TCard } from '@gulcc/tabler-vue'
</script>

<template>
  <TCard title="Basic Card / 基础卡片" subtitle="Card subtitle">
    This is the card body content. / 这是卡片正文内容。
    <template #footer>
      Footer content / 页脚内容
    </template>
  </TCard>
</template>

Advanced Usage / 进阶场景

vue

<script setup lang="ts">
import { TCard } from '@gulcc/tabler-vue'
import { IconStar } from '@tabler/icons-vue'
</script>

<template>
  <!-- Colored card / 深色卡片 -->
  <TCard bg="primary" text-color="primary-fg" title="Dark Card / 深色卡片">
    Content on dark background / 深色背景上的内容
  </TCard>

  <!-- Card with status bar / 带状态条 -->
  <TCard title="With Status / 状态指示" status-color="danger" status-position="top">
    Content / 内容
  </TCard>

  <!-- Card with image / 带图片 -->
  <TCard
    title="Image Card / 图片卡片"
    img-src="/path/to/image.jpg"
    img-ratio="16x9"
  >
    Content / 内容
  </TCard>

  <!-- Stacked card / 堆叠卡片 -->
  <TCard title="Stacked / 堆叠效果" stacked>
    Content / 内容
  </TCard>

  <!-- Link card with hover effect / 可悬停的链接卡片 -->
  <TCard title="Clickable / 可点击" href="/detail" link-pop>
    Click me / 点击我
  </TCard>

  <!-- With ribbon / 带缎带 -->
  <TCard title="With Ribbon / 带缎带" ribbon-color="red">
    <template #ribbon>
      <IconStar />
    </template>
    Content / 内容
  </TCard>
</template>

Tips / 避坑指南

When using bg + textColor, always pair bg="primary" with text-color="primary-fg" for proper contrast
noBody removes the .card-body wrapper — useful for embedding <table> or <list-group> seamlessly
onlyBody combines title and content into one body (no card-header divider)
Link effects (linkRotate, linkPop) require href, to, or link=true to activate
Images with imgPosition="start" or "end" render a horizontal row-0 layout (side image); "top" or "bottom" render responsive background images

TCard / 卡片 ​

Props / 属性 ​

Slots / 插槽 ​

Basic Usage / 基础用法 ​