CSS: wrapper ​

body[class~="instui-display-flex"] — Baris app-shell: navigasi samping, kontainer dengan header, dan panel opsional.

✅ Gunakan Wrapper ketika:

  • Membangun halaman produk Canvas penuh yang membutuhkan shell tata letak konsisten

  • Halaman menggunakan GlobalNav sebagai jangkar navigasi utama

  • Halaman membutuhkan panel samping: ContentTabList, TrailingContentArea, atau UtilityPanel

  • Anda memerlukan padding kontainer yang konsisten dan lebar maksimum konten di seluruh halaman 🚫 Jangan gunakan Wrapper ketika:

  • Membangun Modal, Tray, atau Drawer — elemen tersebut memiliki kontainer tata letak sendiri

  • Membungkus sub-bagian halaman — Wrapper berisi seluruh halaman, bukan hanya sebuah wilayah

Aksesibilitas ​

  • Petakan area konten utama ke landmark <main> dengan tautan skip-nav sehingga pengguna keyboard dapat melewati GlobalNav
  • Beri ContentTabList role="navigation" dengan aria-label yang berbeda seperti "Page navigation" — terpisah dari landmark GlobalNav
  • Beri TrailingContentArea role="complementary" dengan aria-label deskriptif yang mencerminkan isinya, misalnya "Student details"
  • Beri setiap UtilityPanel aria-label yang berbeda: "AI assistant", "Notifications", atau "Filters"
  • Saat UtilityPanel terbuka, pindahkan fokus ke dalam panel; saat menutup, kembalikan fokus ke pemicu yang membukanya

Penggunaan ​

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

Struktur ​

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;

Slot ​

SlotDeskripsi
contentKonten halaman utama.
filtersKonten filter opsional di dalam header.
headerSlot header opsional di bawah deskripsi halaman.
panelKonten panel utilitas.
trailingKonten pelengkap trailing.

Bagian ​

BagianDeskripsi
.actionsTombol header opsional di akhir baris atas.
.containerKolom halaman utama yang memuat header dan konten.
.contentRegion konten utama di dalam kolom kontainer.
.descriptionDeskripsi halaman opsional di bawah judul.
.filtersRegion filter opsional di dalam header.
.headerRegion header di dalam kolom kontainer.
.infoKontainer untuk judul halaman dan deskripsi opsional.
.listKolom navigasi opsional di dalam konten.
.mainKolom konten utama di dalam konten.
.panelRegion panel utilitas yang terbuka di sisi kanan halaman.
.tabsTab navigasi opsional di awal baris konten.
.titleJudul halaman di bawah baris atas.
.topBaris grid yang berisi breadcrumbs dan utilitas.
.trailingKolom pelengkap opsional di dalam konten.
.utilitiesAksi utilitas di akhir baris atas.

Status ​

StatusDeskripsi
:optional—

Token yang digunakan ​

TokenTipeNilai
--instui-background-color-page——

Subkomponen ​

Terkait ​