比较
在两种具名条件下比较同一主体。
两种条件
Stacked below 40rem
01
02
01
02
Each stage is captioned with the condition it shows.
完整尺度
超过两个值的尺度，应在同一展示区用网格排列带标签的示例。
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 < 40rem)</figcaption><div class="ui-stage">…</div></figure> <figure><figcaption>@media (width ≥ 40rem)</figcaption><div class="ui-stage">…</div></figure></div>两个浏览器预览也采用相同的比较方式：DemoThemeComparison 和 DemoStyleComparison 会在每个 figcaption 下方放置 DemoViewport。