컨테이너
페이지 뷰포트를 유지하며 실제 래퍼의 너비를 조절합니다.
쿼리 카드
Query card
Media
A visual region
Content
Stacks when this wrapper narrows.
Below 18rem of container width the regions stack.
전체 페이지 사용
뷰포트 자체가 학습 대상이면 컨테이너 대신 브라우저의 실제 페이지를 보여 주세요.
작업 공간 레이아웃
iframe 뷰포트를 조절하세요. 전체 콘텐츠를 보려면 미리보기 안에서 스크롤하세요.
사용 위치: 반응형 디자인 가이드.
사용법과 인터페이스
DemoContainer는 ui-tray-head의 title과 너비 도구, ui-stage 위의 측정용 래퍼, 선택적 caption으로 이루어진 전체 트레이를 렌더링합니다. maxWidth(기본값 720)는 조절 범위를 제한하며 Fit은 사용 가능한 너비로 되돌립니다.
<DemoContainer title="Card width" caption="The card stacks below 18rem." maxWidth={720}> <div className="container-inline"> <article className="p-md">The card owns its containment.</article> </div></DemoContainer>페이지 뷰포트는 바뀌지 않습니다. 예제에는 쿼리 경계와 반응형 자손 요소를 유지하세요. 래퍼에는 data-demo-container와 자체 너비만 설정합니다.