CSS: wrapper

body[class~="instui-display-flex"] — Baris app-shell: navigasi sisi, bekas dengan pengepala, dan panel pilihan.

✅ Gunakan Wrapper apabila:

• Membangunkan halaman produk Canvas penuh yang memerlukan shell susun atur konsisten

• Halaman menggunakan GlobalNav sebagai sauh navigasi utama

• Halaman memerlukan panel sisi: ContentTabList, TrailingContentArea, atau UtilityPanel

• Anda memerlukan padding bekas dan lebar maksimum kandungan yang konsisten di seluruh halaman 🚫 Jangan gunakan Wrapper apabila:

• Membangunkan Modal, Tray, atau Drawer — itu mempunyai bekas susun atur sendiri

• Membalut subseksi halaman — Wrapper mengandungi seluruh halaman, bukan satu kawasan

Aksesibiliti

• Peta kawasan kandungan utama kepada penanda <main> dengan pautan skip-nav supaya pengguna papan kekunci boleh melepasi GlobalNav
• Berikan ContentTabList role="navigation" dengan aria-label yang berbeza seperti "Page navigation" — berasingan dari penanda GlobalNav
• Berikan TrailingContentArea role="complementary" dengan aria-label deskriptif yang mencerminkan kandungannya, seperti "Student details"
• Berikan setiap UtilityPanel aria-label yang berbeza: "AI assistant", "Notifications", atau "Filters"
• Apabila UtilityPanel dibuka, pindahkan fokus ke dalam panel; apabila ia ditutup, kembalikan fokus kepada pencetus yang membukanya

Penggunaan

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

Struktur

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;

Slot

Slot	Penerangan
content	Kandungan utama halaman.
filters	Kandungan penapis pilihan di dalam pengepala.
header	Slot pengepala pilihan di bawah penerangan halaman.
panel	Kandungan panel utiliti.
trailing	Kandungan pelengkap di hujung.

Bahagian

Bahagian	Penerangan
.actions	Butang pengepala pilihan di hujung baris atas.
.container	Lajur utama halaman yang memegang pengepala dan kandungan.
.content	Wilayah kandungan utama di dalam lajur bekas.
.description	Penerangan halaman pilihan di bawah tajuk.
.filters	Wilayah penapis pilihan di dalam pengepala.
.header	Wilayah pengepala di dalam lajur bekas.
.info	Bekas untuk tajuk halaman dan penerangan pilihan.
.list	Lajur navigasi pilihan di dalam kandungan.
.main	Lajur kandungan utama di dalam kandungan.
.panel	Wilayah panel utiliti yang terbuka di sebelah kanan halaman.
.tabs	Tab navigasi pilihan di permulaan baris kandungan.
.title	Tajuk halaman di bawah baris atas.
.top	Baris grid yang mengandungi breadcrumbs dan utiliti.
.trailing	Lajur pelengkap pilihan di dalam kandungan.
.utilities	Tindakan utiliti di hujung baris atas.

Keadaan

Keadaan	Penerangan
:optional	—

Token digunakan

Token	Jenis	Nilai
--instui-background-color-page	—	—

Subkomponen

• agent-shell
• breadcrumb
• button
• card
• drawer-layout.content
• list
• modal.header
• side-nav-bar
• tabs
• tabs.panel

Berkaitan

• card
• agent-shell
• breadcrumb
• tabs
• button
• heading