コンポーネント

シートとくぼみ

素材の段階に沿った、浮き上がるシートと沈み込む面。

高低差

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 を使います。独自の面色を作らないでください。面の扱いを教える例では、代わりにプリセットの bg-surface-* ユーティリティを使います。