트레이와 스테이지

완전한 예제

<div class="grid-cols(3) gap-md p-md">  <div>01</div>  <div>02</div>  <div>03</div></div>

.grid-cols\(3\) {  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr))}.gap-md {  gap: var(--spacing-md)}.p-md {  padding: var(--spacing-md)}

스테이지만

머리글과 소스가 없으면 트레이는 하나의 견본을 둘러싼 조용한 프레임이며 캡션만으로 그림 이름을 표시합니다.

사용 위치: 구문 튜토리얼.

사용법과 인터페이스

Demo는 선택적 ui-tray-head(title, description, controls), 자식을 담는 ui-stage, 선택적 source, ui-tray-caption으로 이루어진 하나의 figure.ui-tray를 렌더링합니다. class와 style은 스테이지에 적용되므로 외곽 UI는 시연하는 레이아웃에 참여하지 않습니다. 대상은 기본적으로 중앙에 배치되며 align="start"는 시작 가장자리에 배치합니다.

<Demo title="Collection" caption="The card follows its container." source={<>  <Code lang="html">{html}</Code>  <DemoGeneratedCSS><Code lang="css" beautify>{css}</Code></DemoGeneratedCSS></>}>  <DemoSurface className="p-lg">Room for the details.</DemoSurface></Demo>

<figure class="ui-tray">  <figcaption class="ui-tray-head"><div><p class="ui-tray-title">Collection</p></div></figcaption>  <div class="ui-stage">…</div>  <div class="ui-code">…</div>  <details class="ui-disclosure"><summary>Generated CSS</summary>…</details>  <div class="ui-tray-caption">The card follows its container.</div></figure>

자체 간격이 있는 장면에서는 padding="sm"과 padding="none"이 스테이지의 data-padding에 대응합니다. DemoViewport 브라우저, ui-compare, 코드 창처럼 내용 자체에 프레임이 있다면 frame="none"을 추가하세요. DemoGeneratedCSS는 항상 닫힌 상태로 시작합니다. 레이블과 컨트롤은 측정 대상인 flex, grid, float 부모 밖에 두세요.

#목적에 맞는 배경

설명하는 동작에 맞춰 스테이지 배경을 선택하세요. 대부분의 예제는 기본 밝은 스테이지를 사용합니다. background는 ui-stage의 data-background에 대응합니다.