组件

托盘与展示区

以标题栏、明亮展示区、默认折叠生成 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 或其他空白空间。

网格

以规则线条检查对齐与定位。

点阵

对照稀疏网格比较位置。

棋盘格

呈现图片或绘制表面的透明度。