Card 卡片
用于承载一组相关内容的信息容器。
基础用法
基础卡片
这是一张基础卡片，展示一组摘要信息。
内容区支持任意自定义结构。
无标题
无标题卡片
省略 title 属性时，仅保留内容区。
可悬浮
悬浮阴影
将鼠标移入卡片，可看到阴影过渡效果。
扩展区
带操作扩展区
通过 extra 插槽在标题右侧放置操作。
封面图
cover-src 属性或 cover 插槽可在卡片顶部放一张全宽封面图（object-fit: cover 自适应裁切）。
cover-src 封面图
沿江 15 公里休闲骑行线路，周末出发正合适。
cover 插槽自定义封面
周末两日轻装徒步路线推荐，无需露营装备。
封面 + 操作区（商品卡）
底部 actions 插槽放按钮组，上方自动带分隔线。
商品卡
主动降噪 · 30 小时续航 · 蓝牙 5.3
¥ 899
可点击（clickable）
clickable 整卡可点：可聚焦、Enter/Space 触发 oas-click，焦点环随键盘聚焦出现。点击操作区内的按钮不会触发整卡点击。
可点击卡片
点击整卡或按 Enter/Space 触发 oas-click。
可点击 + 操作区互不干扰
点卡片主体触发整卡点击；点右下按钮走各自操作。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clickable | 整卡可点（focusable，点击/Enter/Space 派发 oas-click） | boolean | — |
cover-alt | 封面图 alt 文本（无障碍） | string | — |
cover-src | 封面图 URL，置于卡片顶部（object-fit: cover 自适应裁切） | string | — |
hoverable | 是否开启悬浮阴影（阴影 + 上浮提升 + 指针） | boolean | — |
title | 卡片标题 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-click | 整卡点击（clickable 时），detail 含 originalEvent |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 卡片内容 |
actions | 底部操作区（查看/编辑/删除等按钮组），上方带分隔线 |
cover | 自定义封面内容（与 cover-src 二选一，cover-src 优先） |
extra | 标题右侧扩展区 |