컴포넌트

시트와 움푹 들어간 면

재질 단계에 따른 떠 있는 시트와 움푹 들어간 면입니다.

높낮이

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-* 유틸리티를 사용하세요.