컴포넌트

비교

이름을 붙인 두 조건에서 같은 대상을 비교합니다.

두 조건

Stacked below 40rem

@media (width < 40rem)

@media (width ≥ 40rem)

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은 항목마다 조건 이름을 표시하는 figcaption과 대상을 담는 ui-stage가 있는 figure를 두어 div.ui-compare를 렌더링합니다. 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>

두 브라우저도 같은 방식으로 비교합니다. DemoThemeComparison과 DemoStyleComparison은 각 figcaption 아래에 DemoViewport를 배치합니다.