元件

面板與內凹區域

依材質層級呈現浮起面板與內凹區域。

高度層級

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。