CSS: wrapper ​

body[class~="instui-display-flex"] — 应用外壳行：侧边导航、带页眉的容器，以及可选面板。

✅ 何时使用 Wrapper：

  • 构建需要一致布局外壳的完整 Canvas 产品页面

  • 页面使用 GlobalNav 作为主要导航锚点

  • 页面需要侧面板：ContentTabList、TrailingContentArea 或 UtilityPanel

  • 需要在整个页面上保持一致的容器内边距和内容最大宽度 🚫 不要在以下情况使用 Wrapper：

  • 构建 Modal、Tray 或 Drawer —— 它们有各自的布局容器

  • 仅包裹页面的子区域 —— Wrapper 包含整个页面，而不是某个区域

无障碍 ​

  • 将主内容区域映射为 <main> 地标，并提供跳过导航链接，以便键盘用户可以绕过 GlobalNav
  • 为 ContentTabList 提供 role="navigation" 并使用明确的 aria-label（例如 “Page navigation”）——与 GlobalNav 的地标区分开
  • 为 TrailingContentArea 提供 role="complementary" 并使用能反映其内容的描述性 aria-label，例如 “Student details”
  • 为每个 UtilityPanel 提供不同的 aria-label："AI assistant"、"Notifications" 或 "Filters"
  • 当 UtilityPanel 打开时，将焦点移动到面板内；关闭时，将焦点返回到触发它的触发器

用法 ​

css
@import "@pantoken/plugin-layouts/layouts.css";

结构 ​

text
body[class~="instui-display-flex"]
  side-nav-bar (component)
  .container
    modal.header (component)
      .top
        breadcrumb (component)
        .utilities (0..1)
          button + button (component, 1..n)
      .info
        .title
        .description (0..1)
      ‹content: header› (0..1)
      .actions (0..1)
        button + button (component, 1..n)
      tabs (component, 0..1)
        tabs (component)
      .filters (0..1)
        ‹content: filters›
    drawer-layout.content (component)
      list + card (component, 0..1)
      slot[name="content"].main
      slot[name="trailing"].trailing + card (component, 0..1)
  tabs.panel (component)
    card | agent-shell (component, 0..1)
flowchart TD n0["body[class~=&quot;instui-display-flex&quot;]"]:::cssdoc-root n1(["side-nav-bar"]):::cssdoc-component n2(".container"):::cssdoc-part n3(["modal.header"]):::cssdoc-component n4(".top"):::cssdoc-part n5(["breadcrumb"]):::cssdoc-component n6(".utilities"):::cssdoc-part n7(["button + button"]):::cssdoc-component n8(".info"):::cssdoc-part n9(".title"):::cssdoc-part n10(".description"):::cssdoc-part n11[/"‹content: header›"/]:::cssdoc-slot n12(".actions"):::cssdoc-part n13(["button + button"]):::cssdoc-component n14(["tabs"]):::cssdoc-component n15(["tabs"]):::cssdoc-component n16(".filters"):::cssdoc-part n17[/"‹content: filters›"/]:::cssdoc-slot n18(["drawer-layout.content"]):::cssdoc-component n19([".list + card"]):::cssdoc-component n20("slot[name=&quot;content&quot;].main"):::cssdoc-part n21(["slot[name=&quot;trailing&quot;].trailing + card"]):::cssdoc-component n22(["tabs.panel"]):::cssdoc-component n23(["card | agent-shell"]):::cssdoc-component n0 --> n1 n4 --> n5 n6 -->|1..n| n7 n4 -.->|0..1| n6 n3 --> n4 n8 --> n9 n8 -.->|0..1| n10 n3 --> n8 n3 -.->|0..1| n11 n12 -->|1..n| n13 n3 -.->|0..1| n12 n14 --> n15 n3 -.->|0..1| n14 n16 --> n17 n3 -.->|0..1| n16 n2 --> n3 n18 -.->|0..1| n19 n18 --> n20 n18 -.->|0..1| n21 n2 --> n18 n0 --> n2 n22 -.->|0..1| n23 n0 --> n22 click n1 "/api/css/side-nav-bar.md" click n3 "/api/css/modal.header.md" click n5 "/api/css/breadcrumb.md" click n7 "/api/css/button.md" click n13 "/api/css/button.md" click n14 "/api/css/tabs.md" click n15 "/api/css/tabs.md" click n18 "/api/css/drawer-layout.content.md" click n19 "/api/css/card.md" click n21 "/api/css/card.md" click n22 "/api/css/tabs.panel.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;

插槽 ​

插槽描述
content页面的主要内容。
filters页眉内的可选筛选内容。
header位于页面说明下方的可选页眉插槽。
panel实用面板内容。
trailing尾随的互补内容。

部件 ​

部件描述
.actions位于顶行末尾的可选页眉按钮。
.container包含页眉和内容的主页面列。
.content容器列内的主要内容区域。
.description标题下方的可选页面说明。
.filters页眉内的可选筛选区域。
.header容器列内的页眉区域。
.info用于页面标题和可选说明的容器。
.list内容内的可选导航列。
.main内容内的主内容列。
.panel在页面右侧打开的实用面板区域。
.tabs内容行起始处的可选导航选项卡。
.title顶行下方的页面标题。
.top包含面包屑和工具项的网格行。
.trailing内容内的可选互补列。
.utilities顶行末尾的实用操作。

状态 ​

状态描述
:optional—

消耗代币 ​

Token类型值
--instui-background-color-page——

子组件 ​

相关 ​