Card 卡片
Card 用于把内容、媒体、操作和状态浓缩进一块易读的表面里。
组件使用 Rue 当前的视觉语气和 daisyUI class 直连能力，同时提供头部、封面、操作栏、Meta、Grid、loading 和 tabs API。
# 语义化 API
展示 title、extra、cover、actions、hoverable 组合写法。
把封面、头部、操作区放进根组件 props，适合仪表盘、概览页和运营卡片。
语义化 API 适合把常见结构固定下来，减少反复手写 header、body、actions 和 tabs 布局。
# 复合子组件
Body / Title / Actions / Figure 展示，适合手工拼装自定义结构。
Card Title
低层子组件没有被移除，仍然适合自定义媒体顺序、插入任意节点或接管布局细节。
# Meta 与操作栏
Card.Meta 统一头像、标题和描述；配合根组件 actions 更适合做资料卡与工作区卡片。
# 带 Tabs 的卡片
Card 现在可直接承载卡片级 tab 头部，适合概览、里程碑、成员等分区内容。
# Loading 与 Inner
loading 为数据未返回时提供骨架占位，type='inner' 适合二级信息层。
inner 卡片更适合放在正文、抽屉或主卡片内部作为次级说明层，不会抢掉主信息面的视觉焦点。
# Grid 网格卡片
Card.Grid 适合做快捷入口和稠密信息总览；bodyClassName='!p-0' 可以去掉默认留白。
# Pricing Card
展示基础定价卡片示例，作为信息密度更高的业务组合案例。
Premium
$29/mo- High-resolution image generation
- Customizable style templates
- Batch processing capabilities
- AI-driven image enhancements
- Seamless cloud integration
- Real-time collaboration tools
# Card Sizes
展示 xs ~ xl 的基础示例，同时补上更贴近业务语境的说明文案。
Xsmall Card
适合最紧凑的信息块。
Small Card
移动端列表卡片常用尺寸。
Medium Card
默认信息层级。
Large Card
适合模块式运营位。
Xlarge Card
适合宽幅内容摘要、品牌故事和大段说明。
# 内容组合
展示 badge、纯内容卡片、顶部动作卡三种基础布局，并改成同一组内容编排能力展示。
Card Title NEW
标题区可以直接承载状态徽标、分类标签和辅助描述。
Card title!
没有图片时，Card 依然可以作为纯文字信息块，常用于说明、公告和短引导。
把动作放在内容上方，适合轻提示、清单项和可关闭的局部提醒。
# 边框、颜色与层次
展示 border、dash、品牌色、深色居中卡片等基础示例，同时补入 inner 变体。
Outlined
组合描边信息卡，适合列表页和设置页。
Dashed
更像引导态或占位态，用来提示下一步动作。
Brand Surface
展示基础的品牌色卡片用法。
Cookies!
居中内容 + 反差表面适合提醒面板。
Inner
inner 会切到更内嵌的底色和边框，适合把提示块、日志块或小型面板压进更大的容器里。
# 媒体布局
展示顶部图片、底部图片、居中留白、图片覆盖四种媒体布局。
Card Title
最常见的顶部封面布局。
Bottom Image
把媒体放到内容之后，适合做故事卡片。
Centered Card
展示基础居中内容与额外留白的写法。
Image Overlay
imageFull 让封面进入背景层，适合做大图氛围卡。
# 横向布局
展示 side 和响应式横向布局两种基础示例，适合媒体摘要和推荐位。
New movie is released!
Click the button to watch on Jetflix app.
New album is released!
Click the button to listen on Spotiwhy app.
# API
Rue Card 现在同时支持“语义化根组件 API”和“低层复合子组件 API”。如果你已经习惯直接写 daisyUI 结构，也仍然可以继续混用。
Card
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
actions | 底部操作栏，传入节点数组后自动平均分栏 | any[] | - |
activeTabKey | 受控模式下的当前 tab key | string | - |
bodyClassName | 语义化 body 容器的类名 | string | - |
border / bordered | 基础边框别名，等价于追加 card-border | boolean | false |
className | 根节点类名，保持与 daisyUI 类直接混用的能力 | string | - |
cover | 卡片封面，自动渲染为顶部 figure 区域 | any | - |
dash | 基础虚线边框开关，追加 card-dash | boolean | false |
defaultActiveTabKey | 非受控模式下的默认 tab key | string | tabList 第一项 |
extra | 头部右侧操作区域 | any | - |
headerClassName | 语义化 header 容器的类名 | string | - |
hoverable | 启用悬浮抬升与阴影过渡 | boolean | false |
imageFull | 使用 daisyUI image-full，适合封面做背景图 | boolean | false |
loading | 在 body 区域输出骨架占位 | boolean | false |
onTabChange | tab 切换回调，受控与非受控模式都会触发 | (key: string) => void | - |
side | 使用 daisyUI card-side，让 figure 进入横向布局 | boolean | false |
size | 支持 xs~xl 与 small / middle / large 语义别名 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'medium' | 'middle' | 'large' | md |
tabBarExtraContent | tabs 右侧扩展区域 | any | - |
tabList | 头部 tabs 配置列表，支持 disabled 与 className | Array<{ key: string; label?: any; tab?: any; disabled?: boolean; className?: string }> | - |
tabProps | 控制 tabs 的 style、placement、size 与 className | { style?: 'box' | 'border' | 'lift'; placement?: 'top' | 'bottom'; size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; className?: string } | - |
title | 头部标题区 | any | - |
type | 卡片层次语义，inner 会切到更内嵌的底色与边框 | 'default' | 'inner' | default |
variant | 语义化边框风格，优先于展示层 API 编排 | 'outlined' | 'borderless' | 'dashed' | borderless |
Card.Meta
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
avatar | 头像或图标区域 | any | - |
children | 标题和描述下方的自定义补充内容 | any | - |
className | Meta 根节点类名 | string | - |
description | 描述内容 | any | - |
title | 标题内容 | any | - |
Card.Grid
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
className | Grid 单元的类名，常与宽度或背景类联用 | string | - |
hoverable | 是否启用 hover 阴影与背景过渡 | boolean | true |
style | Grid 单元的行内样式 | any | - |
这四个子组件保持和基础一样的职责：当你想完全接管布局顺序时，继续直接拼结构即可；当你只想快速生成头部、封面和操作区时，再切到根组件的语义化 props。