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

相關 ​