仅桌面端保证样式
Card 卡片
信息聚合的卡片容器:头部(header 插槽或 header 属性)、内容区与底部插槽,悬浮时边框微深并浮现投影,适合仪表盘、列表、详情等信息块。内容区默认内边距由 --eb-card-padding 变量控制,可用 body-style 覆盖。
基础用法
header 属性提供标题文字,默认插槽放内容,#footer 插槽渲染底部操作区(有内容时才渲染底部区域)。
项目概况
卡片内容区,可放任意业务内容;body 默认内边距由 --eb-card-padding 控制。
阴影
shadow 默认 never;always 常驻投影,hover 悬停时显示,均为可见的层级投影(非描边)。默认所有卡片悬浮时边框微深并显示投影,传 :hoverable="false" 可完全关闭悬浮反馈(如纯信息展示的静态卡片墙)。
never
默认无阴影
hover
悬停显示阴影
always
常驻阴影,body-style 着色
hoverable=false
静态卡片(无悬浮反馈)
头部插槽
#header 插槽覆盖 header 属性,可放标题加操作按钮、状态标签等复合内容。
部署记录
运行中
今天 14:20 由张三发布了 v2.3.0,变更 12 个文件。
自定义内容区样式
body-style 同时接受对象与字符串两种写法,常用于调整内边距、背景色,实现信息密集或强调型卡片。
小内边距
紧凑排版的信息卡
背景色
字符串写法的强调卡
组合场景:卡片网格
与 Row / Col 组合出等距卡片列表,footer 放操作按钮,是后台仪表盘的典型排版。
订单服务
订单查询、退款处理与开票
会员服务
等级、权益与积分管理
消息服务
站内信、短信与邮件推送
磨砂玻璃
玻璃卡 A:独立 blur = 14px
玻璃卡 B:跟随令牌默认 14px
实底卡:显式 glass=false 脱离全局开关
blur14px
API
Card Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| header | 头部标题文字(有 header 插槽时以插槽为准) | string | |
| shadow | 阴影显示时机 | always | hover | never | never |
| hoverable | 悬浮时是否应用交互反馈(边框微深 + 投影),false 时完全静态 | boolean | true |
| body-style | 内容区样式,支持对象与字符串两种写法 | object | string | {} |
| glass | 磨砂玻璃质感;缺省跟随全局(EbConfigProvider 的 glass) | boolean | — |
| blur | 磨砂模糊半径(px),仅磨砂生效时应用;缺省跟随 --eb-glass-blur 令牌(14px) | number | string | — |
Card Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 卡片内容 | — | — |
| header | 头部内容,覆盖 header 属性(无插槽且无 header 属性时不渲染头部) | — | — |
| footer | 底部内容(有内容时才渲染底部区域) | — | — |