项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

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 脱离全局开关
blur
14px

API ​

Card Props

参数说明类型默认值
header头部标题文字(有 header 插槽时以插槽为准)string
shadow阴影显示时机always | hover | nevernever
hoverable悬浮时是否应用交互反馈(边框微深 + 投影),false 时完全静态booleantrue
body-style内容区样式,支持对象与字符串两种写法object | string{}
glass磨砂玻璃质感;缺省跟随全局(EbConfigProvider 的 glass)boolean—
blur磨砂模糊半径(px),仅磨砂生效时应用;缺省跟随 --eb-glass-blur 令牌(14px)number | string—

Card Slots

参数说明类型默认值
default卡片内容——
header头部内容,覆盖 header 属性(无插槽且无 header 属性时不渲染头部)——
footer底部内容(有内容时才渲染底部区域)——