CSS: drawer-layout ​

.instui-drawer-layout — 접을 수 있는 사이드 트레이와 기본 스크롤 가능한 콘텐츠 창으로 구성된 분할 레이아웃입니다.

-placement-end 및 기본(시작)은 모두 flex-direction/inset-inline-* 논리적 속성을 사용하고 left/right를 사용하지 않으므로, 트레이의 측면은 direction/dir="rtl"에 따라 자동으로 결정됩니다 — 별도의 RTL 규칙이 필요 없습니다.

Source: drawer-layout.css

접근성 ​

트레이가 내비게이션 역할을 할 때는 접근 가능한 제목이나 aria-label로 라벨을 지정하세요. 컨텍스트만으로 식별되지 않을 경우 .content에 role="region"를 부여(InstUI의 DrawerLayout 규약)하고 aria-label/aria-labelledby로 이름을 지정하세요.

사용법 ​

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

예제들 ​

html
<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

구조 ​

text
.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)
flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자 ​

수정자설명
.-openopen 속성이 없어도 트레이를 표시하세요.
.-placement-end트레이를 inline-end 쪽에 도킹합니다.
.-placement-start트레이를 inline-start 쪽에 도킹합니다(기본값; 명시적으로 설정함).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

부분 ​

부분설명
.content메인 패널입니다.
.tray사이드 패널입니다.

사용자 정의 속성 ​

속성타입기본설명
--pantoken-bp-md——오버레이 모드 전환을 위한 너비 임계값(30em, 반응형 유틸리티로 테마화됨).

브라우저 지원 ​

  • 이 요소의 inline-size가 트레이 너비 + --pantoken-bp-md보다 작아지면 drawer-layout.tray/drawer-layout.content 멤버는 @container 쿼리를 통해 자동으로 오버레이 모드로 전환됩니다. @pantoken/interactions 동작은 추가로 [should-overlay-tray]/.-should-overlay-tray(수동 재정의)를 토글하고, 변경을 이벤트로 필요로 하는 앱을 위해 overlaytraychange을 발생시킵니다.

하위 컴포넌트 ​

관련 항목 ​

  • tray — 독립형 에지 오버레이; 이 레이아웃은 트레이와 콘텐츠를 같은 흐름에 유지합니다.
  • context-view — 컨텍스트 동작 및 세부 정보를 위한 더 작은 고정 표면입니다.