CSS: wrapper ​

body[class~="instui-display-flex"] — App-shell 列：側邊導覽、含標頭的容器，以及可選面板。

✅ 在以下情況使用 Wrapper：

  • 建置需要一致版面外殼的完整 Canvas 產品頁面

  • 該頁面使用 GlobalNav 作為主要導覽錨點

  • 該頁面需要側邊面板：ContentTabList、TrailingContentArea，或 UtilityPanel

  • 整頁需要一致的容器內邊距與內容最大寬度 🚫 不要在以下情況使用 Wrapper：

  • 建置 Modal、Tray 或 Drawer——那些有自己的版面容器

  • 僅要包覆頁面的一個子區段——Wrapper 是用於整個頁面，而非單一區域

無障礙 ​

  • 將主要內容區對應為 <main> 地標並提供跳過導覽連結，讓使用鍵盤的使用者能繞過 GlobalNav
  • 為 ContentTabList 設定 role="navigation" 並提供明確的 aria-label（例如「分頁導覽」）— 與 GlobalNav 的地標分離
  • 為 TrailingContentArea 設定 role="complementary" 並使用描述性 aria-label，反映其內容，例如「學生詳細資料」
  • 為每個 UtilityPanel 提供獨特的 aria-label：例如「AI 助手」、「通知」或「篩選條件」
  • 當 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內容列開始處的可選導覽分頁（tabs）。
.title頂部列下方的頁面標題。
.top包含導覽麵包屑與工具的格線列。
.trailing內容內的可選補充欄位。
.utilities頂部列末端的工具操作。

狀態 ​

狀態說明
:optional—

已使用的代幣 ​

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

子元件 ​

相關 ​