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

相关 ​