比較
在兩種具名條件下比較同一主體。
兩種條件
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。