内容 · 13 / 21
Card st-card
卡片容器：elevated / filled / outlined 三种类型，内容用默认插槽自由组合。interactive 让整卡可点并带波纹、hover 抬升与键盘焦点环。
三种 variant
elevated 用 level 1 阴影，filled 用更深的容器底色，outlined 用描边与透明底。三者共享同一套 em 尺寸，只改变材质。
variantlevel 1 阴影 + surface-container-low 底色，适合页面主内容块。
surface-container-highest 底色、无阴影，适合并列的信息卡。
outline-variant 描边、透明底，最轻量，适合密集列表。
示例代码
<st-card>
<strong>Elevated</strong>
<p>默认类型，level 1 阴影。</p>
</st-card>
<st-card variant="filled">...</st-card>
<st-card variant="outlined">...</st-card>interactive：整卡可点
加 interactive 后整张卡成为按钮：hover 抬升、按下有波纹，Tab 可聚焦、Enter / Space 可激活。选择类场景用一张卡表达一个选项。
interactive + click个人项目与原型验证，包含 1 个工作区。
{{picked === '基础版' ? '✓ 已选择' : '点击选择'}}多人协作与权限管理，包含 10 个工作区。
{{picked === '团队版' ? '✓ 已选择' : '点击选择'}}单点登录、审计与专属支持，工作区不限。
{{picked === '企业版' ? '✓ 已选择' : '点击选择'}}已选择：{{picked}} · 累计点击 {{picks}} 次。卡内不要放按钮等交互元素，否则点击内部按钮也会冒泡成整卡点击。
示例代码（选择卡）
<st-card interactive on:click="pick('团队版')">
<strong>团队版</strong>
<p>多人协作与权限管理。</p>
</st-card>
<script>
export default async () => ({
data: { picked: "（未选择）" },
proto: {
pick(name) {
this.picked = name;
},
},
});
</script>标题、正文与操作区
卡片没有固定的 header / footer 插槽，用普通元素组合即可。操作按钮放在内容末尾，非 interactive 卡片里的按钮点击不会触发整卡行为。
内容自由组合有 3 位成员等待加入「设计系统」团队，邀请将在 7 天后过期。
已使用 6.4 GB，共 10 GB。
示例代码
<st-card style="width: 100%;">
<div style="display: flex; justify-content: space-between;">
<strong>团队邀请</strong>
<st-badges value="3" color="primary">待处理</st-badges>
</div>
<p>有 3 位成员等待加入。</p>
<div style="display: flex; justify-content: flex-end; gap: 6px;">
<st-button variant="text">稍后</st-button>
<st-button>查看邀请</st-button>
</div>
</st-card>媒体区与底部操作
媒体区用负 margin 铺满卡片宽度：margin: -1em -1em 12px 配合 width: calc(100% + 2em)，顶部圆角与卡片保持一致。
media + footer从颜色、字号到组件间距的统一规范，附可复用 token 表。
把媒体区换成 <img> 时，记得同时设置 display: block 与相同的负 margin。
示例代码（媒体铺满）
<st-card variant="outlined">
<img
src="/cover.jpg"
alt="封面"
style="display: block; width: calc(100% + 2em); height: 110px;
margin: -1em -1em 12px; object-fit: cover;
border-radius: 0.75em 0.75em 0 0;"
/>
<strong>界面设计系统</strong>
<p>从颜色、字号到组件间距的统一规范。</p>
</st-card>卡片网格
用原生 grid 排卡片，配合 interactive 做成入口矩阵。网格宽度由父容器决定，卡片本身写 width: 100% 即可。
grid + interactive示例代码（网格）
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;">
<st-card interactive on:click="pick('数据看板')">...</st-card>
<st-card interactive on:click="pick('成员管理')">...</st-card>
</div>原生 CSS 定制
宽高、圆角、内边距、底色和阴影都直接写原生 CSS。内边距与圆角用 em，只改 font-size 就能整体缩放卡片内部的间距。
style + font-sizepadding 与圆角随 em 缩小。
内边距与圆角同步放大。
直接覆盖 border-radius、padding 与 background。
示例代码
<st-card style="font-size: 12px;">...</st-card>
<st-card style="border-radius: 1.429em; padding: 1.43em;">...</st-card>
<st-card variant="outlined" style="background: var(--md-sys-color-surface-container-low);">
...
</st-card>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
variant | "elevated" | "filled" | "outlined" | "elevated" | M3 三类型：阴影 / 容器底色 / 描边 |
interactive | boolean | 无 | 整卡可点：hover 抬升 + 波纹 + 键盘焦点环 |
插槽 / 事件 / 注意
- 插槽：默认插槽，可放标题、正文、图片、按钮等任意内容。
- 事件：
click，interactive 时由内部原生按钮冒泡到宿主。 - interactive 卡片 Tab 可聚焦，Enter / Space 可激活。
- 卡内放按钮时不要再加 interactive，避免点击内部按钮同时触发整卡点击。
- 媒体区用负 margin 铺满；字号类默认值用 em，改
font-size等比缩放。