Card 卡片

卡片组件用于承载内容、操作和相关信息，是页面中最通用的容器模块。它提供了丰富的布局变体和装饰元素，能够灵活组合以满足各种内容展示需求。

基础用法

默认卡片包含标题、内容和页脚，使用 title 属性快速设置标题。

vue


<TCard title="基础卡片">
  这是卡片的主体内容区域，可以放置任意内容。
  <template #footer>
    卡片页脚
  </template>
</TCard>

卡片尺寸

通过 size 属性可切换三种预设的内边距尺寸，适配不同显示场景。

查看代码

vue


<TCard size="sm" title="小号 SM">
  紧凑的内边距，适合 sidebar 或信息密集区域。
</TCard>
<TCard title="默认">
  标准内边距，适用于大多数场景。
</TCard>
<TCard size="md" title="中号 MD（默认）">
  宽松内边距，适合作为页面中视觉突出的内容区块。
</TCard>
<TCard size="lg" title="大号 LG">
  宽松内边距，适合作为页面中视觉突出的内容区块。
</TCard>

卡片标题与副标题

Card 支持通过 prop 和 slot 两种方式设置 title（标题）和 subtitle（副标题）。副标题渲染在标题下方，字号更小、颜色更浅。

查看代码

vue


<TCard title="主标题" subtitle="这是一段描述性的副标题文字">
  使用 prop 方式快速设置标题和副标题。
</TCard>

你也可以使用具名 slot 来插入更复杂的标题内容，或通过 header-actions 插槽在标题右侧添加操作按钮。

查看代码

vue


<TCard>
  <template #title>
    <div class="d-flex align-items-center gap-2 mb-1">
      <TAvatar src="/avatar.png" size="md"/>
      用户信息
    </div>
  </template>
  <template #subtitle>
    带头像的富标题
  </template>
  <template #header-actions>
    <TButton color="primary" ghost>编辑</TButton>
  </template>
  通过 slot 可以自定义更灵活的标题区域。
</TCard>

onlyBody 模式

开启 onlyBody 后，标题和内容合并在同一个 card-body 中，无 card-header 分割线，布局更简洁。

查看代码

vue


<TCard onlyBody title="onlyBody 模式" subtitle="标题与内容无缝融合">
  标题区域与内容之间的分割线被移除了，整体视觉效果更加紧凑统一。
</TCard>

链接卡片

Card 集成 Vue Router 和原生链接，可渲染为可点击的卡片。

vue


<TCard href="#link" title="外部链接">
  渲染为 <code>&lt;a&gt;</code> 标签。
</TCard>
<TCard link title="链接样式">
  仅添加链接样式（hover 效果），无实际链接行为。
</TCard>

搭配 linkRotate 或 linkPop 属性可增加鼠标悬停时的交互动效。

vue


<TCard href="#" linkRotate title="旋转效果">
  鼠标移入时轻微旋转。
</TCard>
<TCard href="#" linkPop title="弹起效果">
  鼠标移入时弹起并加深阴影。
</TCard>

卡片背景色

使用 bg 和 textColor 属性可快速为卡片设置背景色和文字颜色。

vue


<TCard bg="primary" textColor="primary-fg" title="主题色卡片">
  使用 Primary 背景色，文字自动适配。
</TCard>
<TCard bg="blue-lt" title="浅色卡片" subtitle="搭配浅色背景">
  浅色背景适合在深色卡片旁边形成对比。
</TCard>

状态指示条

使用 statusColor 在指定位置的边缘添加一条彩色指示条，适合用来标识卡片的状态分类。

查看代码

vue


<TCard statusColor="success" title="成功状态">
  顶部绿色状态条。
</TCard>
<TCard statusColor="danger" statusPosition="start" title="错误状态">
  左侧红色状态条。
</TCard>
<TCard statusColor="warning" statusPosition="bottom" title="警告状态">
  底部黄色状态条。
</TCard>

激活与未激活状态

使用 active 和 inactive 属性标识卡片的启用状态。

vue


<TCard active title="激活状态">
  添加左侧高亮边框，表示当前选中项。
</TCard>
<TCard inactive title="未激活状态">
  卡片整体灰化，视觉上不可用。
</TCard>

边框与堆叠

vue


<TCard borderless title="无边框卡片">
  去除边框和阴影，完全融入背景。
</TCard>
<TCard stacked title="堆叠卡片">
  底部双层阴影效果，营造层次感。
</TCard>

倾斜效果

使用 rotateStart 或 rotateEnd 属性让卡片呈现轻微的倾斜透视感。

vue


<TCard rotateStart title="向左倾斜">
  卡片向左（从右下到左上）倾斜。
</TCard>
<TCard rotateEnd title="向右倾斜">
  卡片向右（从左下到右上）倾斜。
</TCard>

图文混排

Card 支持 4 种图片位置：top（顶部）、bottom（底部）、start（左侧）、end（右侧），并通过 imgRatio 控制响应式图片的宽高比。

💡 顶部/底部图片使用 CSS background-image + img-responsive 响应式容器渲染；侧边图片使用 <img> 标签 + row 栅格布局，适合展示图文并茂的列表卡片。

查看代码

vue


<TCard
    imgSrc="https://picsum.photos/seed/card1/600/300"
    imgPosition="top"
    imgRatio="21x9"
    title="顶部图片"
>
  21:9 宽幅顶部图片，适合作为封面。
</TCard>
<TCard
    imgSrc="https://picsum.photos/seed/card2/600/300"
    imgPosition="bottom"
    imgRatio="16x9"
    title="底部图片"
>
  16:9 底部图片，文字在上，图片在下。
</TCard>

侧边图片

💡 响应式提示：侧边图片使用了 order-md-last 栅格重排。在较窄的屏幕（如移动端或当前文档的窄视口）下，图片会自动恢复默认顺序以保证阅读体验。
💡 布局提示：侧边图片模式下，#footer 插槽内容会自动贴合卡片底部，无需额外 CSS。

查看代码

vue


<TCard
    imgSrc="https://picsum.photos/seed/card3/200/200"
    imgPosition="start"
    title="左侧图片"
>
  左侧展示缩略图，右侧展示内容，适合文章列表卡片。
  <template #footer>
    <a href="#">阅读更多</a>
  </template>
</TCard>
<TCard
    imgSrc="https://picsum.photos/seed/card4/200/200"
    imgPosition="end"
    title="右侧图片"
>
  图片在右侧，文字在左侧。
  <template #footer>
    <a href="#">阅读更多</a>
  </template>
</TCard>

图片比例对照

Card 支持以下 13 种响应式图片比例，通过 imgRatio 属性设置：

比例 (imgRatio)	说明
`1x1`	正方形
`2x1`	横向宽幅
`1x2`	纵向竖幅
`3x1`	超宽横幅
`1x3`	超长竖幅
`4x1`	极宽横幅
`1x4`	极高竖幅
`4x3`	标准照片比例
`3x4`	竖版照片比例
`16x9`	高清视频比例
`9x16`	手机竖屏比例
`21x9`	超宽电影比例（默认）
`9x21`	超长竖屏比例

默认值为 21x9。

图章装饰

通过 #stamp 插槽可在卡片右上角添加一个图章装饰元素，常用于展示徽标、图标或品牌元素。

使用 #stamp 时，内部需要用 <div class="card-stamp-icon"> 包裹图标，可配合 bg-* 工具类设置背景色，图标元素需带上 icon 类名。

vue


<TCard title="带图章的卡片">
  右上角可放置品牌图标或装饰元素。
  <template #stamp>
    <div class="card-stamp-icon bg-yellow">
      <IconStar class="icon icon-1" />
    </div>
  </template>
</TCard>

缎带

使用 #ribbon 插槽搭配 ribbonColor 和 ribbonPosition 属性，可在卡片左侧或顶部添加一条装饰缎带。

查看代码

vue


<TCard ribbonColor="red" title="左侧缎带" subtitle="默认 start 位置">
  红色左侧缎带。
  <template #ribbon>
    Hot
  </template>
</TCard>
<TCard ribbonColor="orange" ribbonPosition="top" title="顶部缎带">
  橙色顶部缎带。
  <template #ribbon>
    <IconStar/>
  </template>
</TCard>

卡片页脚与透明页脚

通过 #footer 插槽添加卡片底部区域，开启 footerTransparent 可使页脚透明。侧边图片模式下，#footer 会自动贴底。

vue


<TCard title="带页脚的卡片">
  卡片内容...
  <template #footer>
    <div class="d-flex justify-content-between">
      <span>更新时间：2024-01-01</span>
      <a href="#">详情</a>
    </div>
  </template>
</TCard>
<TCard footerTransparent title="透明页脚">
  卡片内容...
  <template #footer>
    页脚背景透明，融合到卡片主体中。
  </template>
</TCard>

noBody 模式

开启 noBody 后，卡片主体内容不再被 card-body 包裹，适合直接放置表格、列表组等需要无缝贴合的元素。

查看代码

vue


<TCard title="无包裹模式的表格" noBody>
  <div class="table-responsive">
    <table class="table table-vcenter card-table">
      <thead>
      <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>城市</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>张三</td>
        <td>前端工程师</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>后端工程师</td>
        <td>北京</td>
      </tr>
      </tbody>
    </table>
  </div>
</TCard>

API

属性 (Props)

属性名	说明	类型	默认值
`bg`	卡片背景色，如 `bg="primary"` → `class="bg-primary"`	`TablerColor`	`undefined`
`textColor`	卡片文字色，如 `textColor="primary-fg"` → `class="text-primary-fg"`	`TablerColor`	`undefined`
`borderless`	无边框模式	`boolean`	`false`
`footerTransparent`	页脚透明模式	`boolean`	`false`
`href`	链接地址，渲染为 `<a>` 标签	`string`	`undefined`
`to`	路由跳转目标，渲染为 `<router-link>`	`RouteLocationRaw`	`undefined`
`link`	仅添加链接样式（无实际链接行为），配合 `linkRotate`/`linkPop` 使用	`boolean`	`false`
`linkRotate`	鼠标悬停时轻微旋转（需配合 `href`/`to` 或 `link`）	`boolean`	`false`
`linkPop`	鼠标悬停时弹起加深阴影（需配合 `href`/`to` 或 `link`）	`boolean`	`false`
`noBody`	取消默认 `.card-body` 包裹，适合表格/列表组无缝贴合	`boolean`	`false`
`onlyBody`	标题与内容合并在同一个 `card-body`，无 `card-header` 分割线	`boolean`	`false`
`size`	卡片内边距尺寸	`'sm' \| 'md' \| 'lg'`	`undefined`（相当于 `md`）
`stacked`	堆叠效果（底部双层阴影）	`boolean`	`false`
`statusColor`	状态指示条颜色	`TablerColor`	`undefined`
`statusPosition`	状态指示条位置	`'top' \| 'start' \| 'bottom'`	`'top'`
`title`	卡片标题（prop 方式）	`string`	`undefined`
`subtitle`	卡片副标题，渲染在标题下方（prop 方式）	`string`	`undefined`
`rotateStart`	卡片倾斜（从左下到右上）	`boolean`	`false`
`rotateEnd`	卡片倾斜（从左上到右上）	`boolean`	`false`
`active`	激活状态高亮显示	`boolean`	`false`
`inactive`	未激活状态灰化显示	`boolean`	`false`
`ribbonColor`	缎带背景色	`TablerColor`	`undefined`
`ribbonPosition`	缎带位置	`'start' \| 'top'`	`'start'`
`imgSrc`	图片 URL	`string`	`undefined`
`imgPosition`	图片位置	`'start' \| 'end' \| 'top' \| 'bottom'`	`'top'`
`imgRatio`	响应式图片宽高比	`'1x1' \| '2x1' \| '1x2' \| '3x1' \| '1x3' \| '4x1' \| '1x4' \| '4x3' \| '3x4' \| '16x9' \| '9x16' \| '21x9' \| '9x21'`	`'21x9'`
`imgAlt`	图片 alt 文字（仅侧边图片生效）	`string`	`undefined`

插槽 (Slots)

插槽名	说明
`default`	卡片主体内容（被 `card-body` 包裹，`noBody` 模式除外）
`header`	卡片头部区域（覆盖默认的 `title` + `subtitle` + `header-actions` 结构）
`title`	卡片标题（替换 prop `title` 的渲染位置）
`subtitle`	卡片副标题（替换 prop `subtitle` 的渲染位置）
`header-actions`	头部右侧的操作区域，渲染在 `.card-options` 容器中
`footer`	卡片底部页脚
`stamp`	右上角图章装饰区域
`ribbon`	左侧或顶部的装饰缎带
`img`	侧边图片区域（仅 `imgPosition="start"` 或 `"end"` 时生效），可替换默认的 `<img>` 渲染

Card 卡片 ​

基础用法 ​

卡片尺寸 ​

卡片标题与副标题 ​

onlyBody 模式 ​

链接卡片 ​

卡片背景色 ​

状态指示条 ​

激活与未激活状态 ​

边框与堆叠 ​

倾斜效果 ​

图文混排 ​

侧边图片 ​

图片比例对照 ​

图章装饰 ​

缎带 ​

卡片页脚与透明页脚 ​

noBody 模式 ​

API ​

属性 (Props) ​

插槽 (Slots) ​

Card 卡片

基础用法

卡片尺寸

卡片标题与副标题

onlyBody 模式

链接卡片

卡片背景色

状态指示条

激活与未激活状态

边框与堆叠

倾斜效果

图文混排

侧边图片

图片比例对照

图章装饰

缎带

卡片页脚与透明页脚

noBody 模式

API

属性 (Props)

插槽 (Slots)