Surface 面板
页面上的一块底:把相关的分组、卡片圈在一起时用。它本身不承载内容,里面放 Group、Card 或表单。
基本用法
面板用表面色 --ok-surface 和一圈发丝线与画布分开,没有阴影。里面的 Group 自动取同心圆角(面板圆角 − 面板内边距)。
消息通知有人提到你时提醒
每周摘要
尺寸
三档圆角与内边距:sm 32 / 12、md 44 / 16(默认)、lg 44 / 20。子项之间的间距等于内边距。
sm:圆角 32,内边距 12
md:圆角 44,内边距 16
lg:圆角 44,内边距 20
作为地标区域
用 as 换成 section 并起名,读屏用户就能在地标列表里直接跳到它。
隐私
这些设置只影响你自己的账号。公开个人主页
规格
- 圆角
- 44(sm 为 32),配 corner-shape
- 内边距
- 四边相等:16(sm 12、lg 20)
- 分层
- 表面色 + 1px 发丝线 + 顶部高光,无阴影
- 同心
- 内层 Group 圆角 = 面板圆角 − 内边距(44 − 16 = 28)
接口
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
as | ElementType | 'div' | 渲染成什么元素。 |
size | 'sm' | 'md' | 'lg' | 'md' | 圆角与内边距的档位。 |
...rest | HTMLAttributes<HTMLElement> | — | 其余原生属性、className、style 和 ref 透传到根节点。 |
无障碍
- 默认是没有语义的 div,不会出现在读屏的地标里。
- 用
as="section"时必须同时给aria-label或aria-labelledby,否则不会成为 region 地标。 - 面板本身不可聚焦,没有键盘操作;键盘焦点直接落到里面的控件上。