CSS: drawer-layout.content ​

.content — 트레이 옆의 남은 공간을 채우는 주요 콘텐츠 창.

부모의 inline-size가 46em(16em 트레이 너비 + 30em 브레이크포인트)보다 작아지면, 부모의 pantoken-drawer-layout 컨테이너에 대한 @container 쿼리가 이 멤버의 min-inline-size를 자동으로 0으로 낮춰 수동 [should-overlay-tray] 재정의와 일치시킵니다.

접근성 ​

role="region"(InstUI의 DrawerLayout 규약)을 유지하고, 문맥만으로 식별되지 않을 경우 aria-label/aria-labelledby로 명명하십시오.

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.content.css";

예제들 ​

html
<div class="instui-drawer-layout">
  <div class="content" role="region">
    <p class="instui-text">Tray content</p>
  </div>
</div>

구조 ​

text
@scope (@component drawer-layout)
  .content
    ‹content›
flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".content"):::cssdoc-part n2[/"‹content›"/]:::cssdoc-slot end n1 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

조건 ​

타입쿼리설명
containerpantoken-drawer-layout (max-width: 46em)—

사용된 토큰 ​

Token타입값
--drawer-layout-content-min-inline-size<length>—
--pantoken-bp-md<length>30em

관련 항목 ​