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。
可点击 + 操作区互不干扰
点卡片主体触发整卡点击；点右下按钮走各自操作。
可选中卡（selectable）
selectable 让整卡可点选切换选中态——适合图片/标题/描述/操作区俱全的大卡片做多选。选中态为 primary 描边 + 浅 primary 底 + 右上勾选角标；点击卡内的按钮/链接等交互元素不会触发选中；键盘 Space/Enter 同样生效。
单卡缺省不挂 role：可点/可选卡内常嵌操作按钮或链接，挂交互角色会把卡内控件裹进交互元素（屏幕阅读器丢失内部控件可读性），组件仅保留 tabindex 保证键盘可达；多卡组需要单选/多选语义时，由宿主在卡片上显式挂 role="radio"（或 role="checkbox"）并自行管理互斥选中——组件不覆盖宿主显式角色，只叠加 aria-checked 同步。
宿主不设 selected 时组件内部切换并反射属性（非受控）；设了 selected 即受控——组件只派发 oas-change（detail 为 { selected }，切换后的新状态），选中态由宿主监听回写。loading 骨架态不可选；与 href 同设时点选优先于跳转（卡内显式链接/按钮仍走各自操作）。
多选卡（非受控）
已选 0 项
轻量起步，适合小团队验证想法。
标准协作套件，含自动化工作流。
企业级管控，私有部署与审计。
受控单选卡组（宿主回写 oas-change）
5 人以内 · 基础看板
不限人数 · 自动化流程
私有部署 · 审计日志
加载骨架（loading）
loading 时内容区切换为骨架占位（微光动画），正文隐藏；宿主同步 aria-busy。
加载骨架
数据加载完成后展示正文。
紧凑尺寸（size）
size="small" 收紧内边距与标题字号，适合信息密度高的列表场景；默认 medium。
size=small 紧凑卡片
更小的内边距与标题字号。
紧凑密度（density）
density="compact" 是独立于 size 的布局密度档：同时收紧卡片内各分区的内边距与间距（比 size="small" 更紧），适合信息密集的看板、列表与设置面板；默认 default。与 size（字号刻度）正交，可叠加使用。
density=compact 紧凑密度
内边距与各分区间距同时收紧，信息密度更高。
默认档位下的常规内边距与间距。
无边框形态（variant）
variant="borderless" 去掉容器描边，适合嵌套在卡片内做设置分组；默认 outlined。
无边框嵌套（设置面板）
接收被提及、指派与评论回复的提醒。
每周一汇总发送项目动态摘要。
底条（footer）
footer 插槽是独立于操作区的任意底栏：放补充说明、元信息；actions 仍是按钮操作区。
footer 底条 + actions 操作区
我们更新了数据处理条款，请确认后继续。
更新于 2026-09-01 · 适用于全部工作区
标题分割线（header-bordered）
标题区底部分割线默认显示；header-bordered="false" 关闭。
header-bordered=false
标题与内容之间保留分隔线。
标题紧贴内容，适合轻量分组。
阴影三态（shadow）
shadow="none | hover | always"：悬浮阴影、常显阴影或无阴影。hoverable 布尔等价于 shadow="hover"（旧用法保持兼容）；显式 shadow 声明优先于 hoverable。
shadow=always 常显阴影
阴影始终存在，突出层级。
移入时阴影 + 上浮（hoverable 同款）。
用户卡（Meta）
slot="avatar" 在标题左侧放头像；description 属性（或 slot="description"）在标题下方放一行次级小字。两者任一在场时，标题区自动变为「头像 + 标题 + 副文案」形态。
Meta 用户卡
负责组件库架构与渲染性能优化，最近在研究 SSR 水合。
链接卡（href）
href 单独即生效（无需 clickable）：整卡语义为链接，内部锚点承载地址，焦点与键盘 Enter 都由锚点原生支持；target 一并透传。点击卡片内嵌的按钮/链接仍走各自操作，不会误触发整卡跳转。
href 链接卡
点击卡片任意处跳转（键盘 Enter 同样生效）。
新标签页打开，带 target 透传。
组合：标签页
卡片内可以组合其他组件，例如 oas-tabs 做「设置中心」式分区。
卡片内嵌标签页
项目名称、可见范围与默认语言。
邀请成员并按角色分配权限。
归档策略、Webhook 与 API 访问令牌。
栅格卡
宿主 grid 均分卡内块：卡片只负责容器，布局交给宿主 CSS grid。
栅格均分
32
进行中项目
18
已完成交付
96%
按期率
看板卡
与 oas-statistic 组合成数据看板。
统计看板
今日访问量
错误率
在线会话
电商图卡
封面图 + 价格区 + 操作区 + 底条的典型商品卡组合。
电商商品卡
¥ 429¥ 599
三模连接 · 热插拔 · Gasket 结构
满 299 包邮 · 7 天无理由退换
禁用卡（disabled）
disabled 禁用整卡：灰化呈现（含 dark 自动适配）、宿主同步 aria-disabled、不派发交互事件——clickable 的 oas-click、selectable 的选中切换与 oas-change 全部停摆；href 链接卡同时摘除内部锚点地址（原生导航一并失效）。卡内自带的按钮/链接等控件的自身行为不受本属性影响（控件有自己的 disabled）。
禁用的可点卡 / 可选卡
点击弹出消息。
点击无任何反馈（oas-click 停派）。
保留选中视觉，但不可再切换。
横向布局（orientation）
orientation="horizontal" 把封面移到左侧、标题/内容/操作区收进右侧内容列：封面列占 40% 宽并撑满卡片高度（图片不再锁 16:9），适合新闻条目、商品横条等横向空间充足的场景。默认 vertical（封面在顶部的纵向堆叠，现状）。
horizontal 封面左置
封面在左，标题与内容在右，操作区仍在底部。
封面在顶部全宽铺开（现状默认）。
API
oas-card
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clickable | 整卡可点（focusable，点击/Enter/Space 派发 oas-click） | boolean | — |
cover-alt | 封面图 alt 文本（无障碍） | string | — |
cover-src | 封面图 URL，置于卡片顶部（object-fit: cover 自适应裁切） | string | — |
density | 密度档位：default（默认）/ compact（内边距与分区间距同时收紧，比 size="small" 更紧，适合信息密集型场景；与 size 正交，可叠加） | — | — |
description | Meta 副文（title 下方弱化小字；与 description 插槽双通道，slot 优先） | string | — |
disabled | 禁用整卡：灰化 + aria-disabled + 停派交互事件 + href 摘链（已选视觉保留） | boolean | — |
header-bordered | 头部分割线（默认 true；"false" 关闭） | — | — |
hoverable | 是否开启悬浮阴影（阴影 + 上浮提升 + 指针） | boolean | — |
href | 链接卡：整卡语义为链接（内部锚点包装，键盘/中键原生可达） | string | — |
loading | 加载态：内容区切骨架占位（aria-busy 同步） | boolean | — |
orientation | horizontal 封面左置（40% 宽撑满高）+ 内容列右置 | string | — |
selectable | 可选中卡：点击整卡（或 Enter/Space）切换选中态，派发 oas-change；卡内按钮/链接等交互元素不触发选中；与 href 同设时点选优先、不跳转；loading 骨架态不可选 | boolean | — |
selected | 选中态（配合 selectable）：宿主设置即为受控——组件只派发 oas-change 不自改属性，宿主监听回写；未设置时组件内部切换并反射该属性（非受控） | boolean | — |
shadow | 阴影三态：none / hover（悬停浮起）/ always（常显）；hoverable 映射 hover，显式 shadow 优先 | string | — |
size | 尺寸档位：small（紧凑 padding、标题降档）/ medium（默认） | — | — |
target | 链接卡打开目标（配合 href，如 _blank） | string | — |
title | 卡片标题（渲染进可见标题区；读取后即从宿主移除，不残留原生悬浮提示；清空传空串）；富内容用 slot="title" | string | — |
variant | 形态：outlined（默认，带描边）/ borderless（无边框嵌入形态） | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 选中态切换（selectable 时），detail 为 { selected }（切换后的新状态） |
oas-click | 整卡点击（clickable 时），detail 含 originalEvent |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 卡片内容 |
actions | 底部操作区（查看/编辑/删除等按钮组），上方带分隔线 |
avatar | Meta 头像位（header 左置，配合 description 成「头像+标题+副文」形态） |
cover | 自定义封面内容（与 cover-src 二选一，cover-src 优先） |
description | Meta 副文富内容（与 description 属性互斥，slot 优先） |
extra | 标题右侧扩展区 |
footer | 独立底条（与 actions 操作区分离） |
title | 标题富内容插槽，有内容时覆盖 title 属性文案 |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-skeleton-color | var(--oas-color-bg-hover) |
--oas-skeleton-duration | 1.5s |
--oas-skeleton-sheen | var(--oas-color-border) |