元件

托盤與展示區

以標頭、明亮展示區、預設收合生成 CSS 的原始碼區與圖說，組成完整範例。

完整範例

Padding around the group, gap between items

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

產生的 CSS

.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)}

The hatch shows p-md around the grid and gap-md between its children.

僅展示區

沒有標頭與來源時，托盤只以安靜外框包住單一示範，並由圖說命名。

Subject

A caption alone describes the figure.

使用於語法教學.

用法與介面

Demo 會呈現一個 figure.ui-tray，包含選用的 ui-tray-head（title、description、controls）、放置子元素的 ui-stage、選用的 source 與 ui-tray-caption。class 與 style 屬於展示區，因此介面外框不會參與示範版面。展示區預設將主體置中；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。內容本身已有外框時，請加入 frame="none"，例如 DemoViewport 瀏覽器、ui-compare 或程式碼視窗。DemoGeneratedCSS 預設一律收合。標籤與控制項應放在需要測量的 flex、grid 或 float 父元素之外。

#配合教學目的的背景

請根據要說明的行為選擇展示區背景；多數範例使用一般的明亮展示區。background 對應 ui-stage 上的 data-background。

一般

用於閱讀完整範例的預設明亮展示區。

斜線

標示受測 gap、padding 或其他空白空間。

網格

以規則線條檢查對齊與定位。

點陣

對照稀疏網格比較位置。

棋盤格

呈現圖片或繪製表面的透明度。