トレイとステージ

完全な例

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

ステージのみ

ヘッダーとソースがなければ、トレイは1つの見本を囲む控えめな枠となり、キャプションだけで図を名付けます。

使用箇所： 構文チュートリアル.

使い方とインターフェース

Demo は1つの 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 に対応します。DemoViewport のブラウザー、ui-compare、コードウィンドウなど、内容自体に枠がある場合は frame="none" を追加します。DemoGeneratedCSS は必ず閉じた状態で始まります。ラベルと操作部品は、測定対象の flex、grid、float の親要素の外に置いてください。

#目的に合う背景

説明する動作に合わせてステージの背景を選びます。多くの例では、標準の明るいステージを使います。background は ui-stage の data-background に対応します。