CSS: drawer-layout.tray ​

.tray — 기본 콘텐츠 옆에 위치한 사이드 패널로, 선택적 오버레이 및 트레이형 표면 수식자를 가집니다.

배치는 inset-inline-start/inset-inline을 사용하며(left/right는 사용하지 않음), 따라서 -placement-end는 LTR과 RTL 모두에서 실제 트레일링 가장자리에 도킹됩니다.

접근성 ​

내비게이션으로 사용되는 경우 링크를 의미론적 <nav>로 감싸고 접근 가능한 이름을 제공하세요.

사용법 ​

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

예제들 ​

html
<div class="instui-drawer-layout" open>
  <aside class="tray" aria-label="Course navigation">
    <a class="instui-link" href="#">모듈</a>
  </aside>
  <main class="content" role="region">주요 콘텐츠</main>
</div>

구조 ​

text
@scope (@component drawer-layout)
  .tray
    ‹content›
flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".tray"):::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;

수정자 ​

수정자설명
.-placement-end오버레이 모드가 활성화된 경우 이 트레이를 inline-end에 도킹합니다.
.-without-border패널 가장자리의 테두리를 제거합니다.
.-without-shadow오버레이 모드가 활성화된 경우 그림자(elevation)를 제거합니다.

조건 ​

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

사용된 토큰 ​

Token타입값
--drawer-layout-tray-width——
--instui-border-width-sm<length>0.0625rem
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-color-stroke-base<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-tray-width-xs<length>16em
--instui-component-tray-z-index<integer>9999
--instui-elevation-topmostnone | <shadow>#—

관련 항목 ​