组件

面板与内凹区域

依材质层级呈现浮起面板与内凹区域。

高度层级

data-elevation="flat"Collection

data-elevation="1"Collection

default · rise-2Collection

data-elevation="3"Collection

data-elevation chooses flat, rise-1, rise-2 (the default) or rise-3. Geometry and padding stay with the example.

DemoSurface

The specimen component renders a flat sheet by default and rise-1 with elevation="raised".

flat

Start with the collection overview and its key details.

raised

Continue through each column in reading order.

内凹区域

输入、轨道与按下状态会沉入内凹区域。

ui-wellA sunken field for entry and selection.

使用于视图过渡指南.

用法与接口

DemoSurface 会渲染 div.ui-sheet。组件不会添加内边距、尺寸、布局或裁剪设置，这些都由示例提供。默认的 elevation="flat" 是带细边框的面板；elevation="raised" 则映射到 data-elevation="1"。

<DemoSurface className="p-md">A quiet content surface.</DemoSurface><DemoSurface elevation="raised" className="p-md">A raised layer.</DemoSurface>

<div class="ui-sheet" data-elevation="flat">…</div><div class="ui-sheet" data-elevation="1">…</div><div class="ui-well">…</div>

面板使用 --ui-surface-sheet 和 elevation 角色；内凹区域使用 --ui-surface-well 搭配 --ui-elevation-sink。不要自行创建表面颜色；教学涉及表面时，示例主体应使用 preset 的 bg-surface-* utilities。