内容与媒体

ExpandableCard

App Store 风格的展开卡片：从原位置连续放大为居中详情浮层，支持分层视差封面、无重排滚动与无缝阴影交接。

卡片App Store展开容器变形浮层视差详情

快速预览

查看 ExpandableCard 组件的基本效果

基本用法

使用 ExpandableCard 组件的基础示例

导入组件

1import { ExpandableCard } from "@/components/qiuye-ui/expandable-card";
2import { Button } from "@/components/ui/button";

使用组件

1<ExpandableCard
2  className="h-[30rem]"
3  cover={<div className="absolute inset-0 bg-gradient-to-br from-indigo-900 to-fuchsia-800" />}
4  eyebrow="桌面应用"
5  title={"后台在播放，\n字幕留在游戏画面上"}
6  icon={<img src="/icon.png" alt="" />}
7  name="PotSubOverlay"
8  subtitle="透明 · 置顶 · 鼠标穿透"
9  actions={<Button size="sm" className="rounded-full">下载</Button>}
10>
11  <p>展开后的详细介绍……</p>
12</ExpandableCard>

组件演示

查看组件的各种使用方式和效果

App Store 风格卡片

点击卡片，从原位置放大为居中详情；Esc、遮罩、右上角按钮或触屏下拉关闭后飞回原卡片。悬停可以看到分层视差与高光。

受控模式与纯封面卡片

通过 open / onOpenChange 由外部状态驱动，适合同步 URL 参数；actionLabel 设为 null 且不传底栏信息时，只显示封面。

open = false