コンポーネント

比較

同じ対象を名前付きの2条件で比較します。

2つの条件

Stacked below 40rem

@media (width < 40rem)

@media (width ≥ 40rem)

Each stage is captioned with the condition it shows.

完全なスケール

3つ以上の値のスケールは、1つのステージ上にラベル付き見本のグリッドを配置します。

shadow-xs

Quiet separation

Small controls, table rows, and subtle raised states.

shadow-sm

Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-md

Temporary lift

Hover lift, floating toolbars, and command surfaces.

shadow-lg

Detached overlay

Dropdowns, popovers, toasts, and menus.

shadow-xl

Workflow interruption

Drawers, dialogs, and focused panels.

shadow-2xl

Blocking layer

Modals and spotlight surfaces above a dimmed page.

shadow-inset

Sunken well

Inputs, tracks, pressed states, and recessed wells.

使用箇所：色のガイド.

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

DemoComparison は div.ui-compare を描画します。各項目に figure があり、条件名を示す figcaption と対象を置く ui-stage を含みます。frame="none" のトレイに配置すると、ステージをトレイへ直接収められます。

<Demo title="Stacked below 40rem" frame="none">  <DemoComparison items={[    { label: '@media (width < 40rem)', children: <Stacked /> },    { label: '@media (width ≥ 40rem)', children: <Side /> },  ]} /></Demo>

<div class="ui-compare">  <figure><figcaption>@media (width &lt; 40rem)</figcaption><div class="ui-stage">…</div></figure>  <figure><figcaption>@media (width ≥ 40rem)</figcaption><div class="ui-stage">…</div></figure></div>

2 つのブラウザーも同じ構成で比較できます。DemoThemeComparison と DemoStyleComparison は、各 figcaption の下に DemoViewport を配置します。