Surface 容器

带阴影层级的内容容器，提供视觉抬升效果，支持标题、内容、底部插槽与点击交互。

基础用法

默认 md 阴影层级。

默认阴影层级的容器，适合承载卡片式内容。

表面组件提供统一的外观样式：圆角、边框、阴影。

阴影层级

shadow 支持 none、sm、md、lg 四种层级。

none — 无阴影，仅边框和圆角。

sm — 轻微阴影，适合嵌入列表项。

md — 中等阴影，适合卡片容器（默认）。

lg — 深度阴影，适合弹窗或重要区域。

带标题与底部

#header 和 #footer 插槽添加标题区域和底部操作区域。

用户信息

努尔顿

前端工程师

可点击

clickable 属性使容器具有悬浮效果并触发 click 事件。

📦

我的订单

查看全部订单

→

💬

消息中心

3 条未读消息

→

自定义样式

radius、padding、width 支持自定义覆盖默认值。

小圆角 + 紧凑内边距的容器。

大圆角 + 宽松内边距的容器。

组件结构

根元素 <div class="my-surface"> 按顺序包含：头部 __header（可选 title 插槽）、主体 __body（默认插槽）、底部 __footer（可选插槽）。

CSS 类名

类名	说明
.my-surface	根元素
.my-surface--none	无阴影
.my-surface--sm	小阴影
.my-surface--md	中等阴影（默认）
.my-surface--lg	大阴影
.my-surface--clickable	可点击模式（带悬浮动效）
.my-surface__header	头部区域
.my-surface__body	主体内容区
.my-surface__footer	底部区域

API

Surface Props

属性	说明	类型	默认值
shadow	阴影层级	'none' | 'sm' | 'md' | 'lg'	'md'
radius	自定义圆角	string | number	—
padding	自定义内边距	string | number	—
width	自定义宽度	string | number	—
clickable	是否可点击（带悬浮动效）	boolean	false
title	标题文本（可选，与 slot 互斥）	string	—

Surface Slots

名称	说明
default	主体内容
header	标题区域
footer	底部区域

Surface Events

名称	说明
click	点击事件（需设置 clickable）