Tui

Card 卡片

通用内容容器，提供边框 / 阴影 / 圆角 / 内边距 / 背景五项基础能力，默认朴素外观，装饰项按需开启。

基础用法

最朴素的卡片，默认仅提供背景 + 圆角 + 内边距，无边框无阴影。

这是一个朴素卡片，默认无边框无阴影，仅提供背景 + 圆角 + 内边距。

示例代码

vue

边框

通过 border 开启边框，使用主题默认边框色；也可用 border-color 自定义边框颜色。

带边框的卡片，使用主题默认的边框颜色。

自定义边框颜色的卡片。

示例代码

vue

阴影

shadow 支持 false / true / "hover" 三态：关闭 / 常驻阴影 / 悬停时出现阴影。常与 border 组合使用，亦可承载嵌套卡片以构建信息密度更高的看板块。

月度活跃用户实时

128,406↑ 12.4%

常驻阴影：shadow 直接开启，适合需要持续强调的信息卡片，无需用户悬停即可凸显层级。

待处理工单待办

登录异常排查 · #2047110:24

支付链路回滚 · #2046809:51

缓存命中率优化 · #2045909:18

悬停阴影：鼠标移上时才出现阴影，默认保持平面，适合可交互的列表 / 卡片集合。

部署概览生产

边框 + 悬停阴影是实战最常用的写法：边框兜底描边，悬停时阴影补强交互反馈，适合作为容器承载嵌套卡片。

成功率

99.96%

平均延迟

84ms

回滚次数

示例代码

vue

自定义圆角 / 内边距 / 背景

通过 radius / padding / background / border-color 覆盖主题默认值，对应 CSS 变量 --ts-card-radius / --ts-card-padding / --ts-card-bg / --ts-card-border-color。示例改用 --business-card-demo-* 语义变量，明暗主题自动适配；并演示卡片嵌套与 50% 圆角胶囊形态。

接入引导Step 1 / 3

圆角 8px / padding 20px / 浅蓝背景，使用 --business-card-demo-panel-blue-* 变量，明暗主题自动切换。

本周提醒3 项

非对称 padding（14px 20px）/ 暖色卡片，同样走 --business-card-demo-panel-amber-* 变量。

· 续费到期前 7 天提醒
· 配额用量超过 80% 预警
· 安全合规报告待审阅

存储用量健康

圆角 10px / 薄荷色面板，演示卡片嵌套：外层自定义背景，内层用中性面板色。

已用

412 GB

配额

1 TB

分

示例代码

vue

属性 Props

border

是否显示边框

boolean

true / false

false

shadow

阴影：关闭 / 常驻 / 悬停时出现

boolean | 'hover'

false | true | 'hover'

false

radius

圆角，覆盖主题 --ts-card-radius

string | number

undefined

padding

内边距，覆盖主题 --ts-card-padding

string | number

undefined

background

自定义背景色，覆盖主题 --ts-card-background-color

string

borderColor

自定义边框色，覆盖主题 --ts-card-border-color

string

插槽 Slots

default

卡片内容

基础用法

边框

阴影

自定义圆角 / 内边距 / 背景

属性 Props

插槽 Slots