CSS: drawer-layout

.instui-drawer-layout — 一个带可折叠侧托盘和主滚动内容面板的分割布局。

-placement-end 和默认（start）都使用 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 为其命名。

用法

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

示例

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

结构

.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;

修饰符

修饰符	描述
.-open	即使缺少 open 属性也要显示托盘。
.-placement-end	将托盘停靠在内联结束侧。
.-placement-start	将托盘停靠在内联起始侧（默认；显式设置）。
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

部件

部件	描述
.content	主面板。
.tray	侧面板。

自定义属性

属性	类型	默认	描述
--pantoken-bp-md	—	—	覆盖模式的宽度阈值（30em，通过响应式实用工具进行主题化）。

浏览器支持

• 当此元素的内联尺寸小于托盘宽度 + --pantoken-bp-md 时，drawer-layout.tray/drawer-layout.content 成员会通过 @container 查询自动切换到覆盖模式。@pantoken/interactions 行为还会切换 [should-overlay-tray]/.-should-overlay-tray（一个手动覆盖），并为需要以事件感知更改的应用发出 overlaytraychange。

子组件

• drawer-layout.content
• drawer-layout.tray
• tray

相关

• tray — 独立的边缘覆盖；此布局将托盘和内容保持在同一文档流中。
• context-view — 一个更小的锚定面，用于上下文操作与详情。