仅桌面端保证样式
Stack 卡片堆叠
层叠卡片交互件:卡片按方向堆叠,悬停剥离、点击循环/移除,适合待办池、牌组抽卡、相册精选这类「一摞东西」的界面。内容经 item 插槽完全自定义。
卡片堆叠(悬停剥离)
悬停时顶部卡片剥离露出下层,点击进入下一张(cycle):
需求评审今天 14:00 · 3 号会议室
版本发布明天 20:00 · 灰度 20%
季度复盘周五 10:00 · 全员
圆形堆叠(点击移除)
variant 取 circular;click-mode: remove 点击即移除并回传 remove 事件:
张
李
王
赵
Stack Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| items | 卡片数据(内容经 item 插槽渲染) | array | [] |
| variant | 形态 | card | circular | card |
| direction | 堆叠方向(八向) | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right | bottom |
| click-mode | 点击行为:循环换位 / 移除 | cycle | remove | cycle |
| hover-peel | 悬停剥离顶层 | boolean | false |
| size | circular 直径(px) | number | 40 |
| scale-step | 层间缩放步长 | number | 0.06 |
| offset | 层间偏移(px),缺省按 variant 内定 | number | — |
| duration | 动效时长(毫秒) | number | 450 |
Stack Slots / Events / Exposes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| item(插槽) | 卡片内容,作用域:{ item, index } | — | — |
| cycle | 点击循环换位后触发 | () => void | — |
| remove | 点击移除后触发 | () => void | — |
| promote | 置顶后触发 | () => void | — |
| exposes | cycle() / remove() / promoteToTop() 编程式操作 | functions | — |