CSS: wrapper

body[class~="instui-display-flex"] — Ranje app-shell: navigasyon bò, kontenè ak tèt paj, ak yon panèl opsyonèl.

✅ Sèvi ak Wrapper lè:

• Ap konstwi yon paj pwodwi Canvas konplè ki bezwen yon kokiy layout ki konsistan

• Paj la itilize GlobalNav kòm ancraj navigasyon prensipal la

• Paj la bezwen panèl bò: ContentTabList, TrailingContentArea, oswa yon UtilityPanel

• Ou bezwen padding kontenè ak lajè maksimòm kontni konsistan atravè tout paj la 🚫 Pa sèvi ak Wrapper lè:

• Ap konstwi yon Modal, Tray, oswa Drawer — yo gen pwòp kontenè layout yo

• Anvlòp yon sou-seksyon nan yon paj — Wrapper kenbe tout paj la, pa yon rejyon

Aksè

• Map zòn kontni prensipal la sou yon landmark <main> avèk yon lyen skip-nav pou itilizatè klavye ka sote GlobalNav
• Bay ContentTabList role="navigation" ak yon aria-label distenk tankou "Page navigation" — separe de landmark GlobalNav
• Bay TrailingContentArea role="complementary" ak yon aria-label deskriptif ki reflete kontni li, tankou "Student details"
• Bay chak UtilityPanel yon aria-label distenk: "AI assistant", "Notifications", oswa "Filters"
• Lè yon UtilityPanel louvri, deplase fokus andedan panèl la; lè li fèmen, retounen fokus sou trigger ki te louvri li

Itilizasyon

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

Estrikti

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;

Espas

Espas	Deskripsyon
content	Kontni prensipal paj la.
filters	Kontni filtè opsyonèl andedan tèt la.
header	Slot tèt opsyonèl anba deskripsyon paj la.
panel	Kontni panèl itilite.
trailing	Kontni konplemantè final la.

Pati

Pati	Deskripsyon
.actions	Bouton tèt opsyonèl nan fen ranje tèt la.
.container	Kolòn prensipal paj la ki kenbe tèt ak kontni an.
.content	Zòn kontni prensipal andedan kolòn kontenè a.
.description	Deskripsyon paj opsyonèl anba tit la.
.filters	Zòn filtè opsyonèl andedan tèt la.
.header	Rejyon tèt la andedan kolòn kontenè a.
.info	Kontenè pou tit paj ak deskripsyon opsyonèl.
.list	Kolòn navigasyon opsyonèl andedan kontni an.
.main	Kolòn kontni prensipal andedan kontni an.
.panel	Rejyon panèl itilite ki louvri sou bò dwat paj la.
.tabs	Onglet navigasyon opsyonèl nan kòmansman ranje kontni an.
.title	Tit paj anba ranje tèt la.
.top	Ranje gri ki gen breadcrumbs ak zouti yo.
.trailing	Kolòn konplemantè opsyonèl andedan kontni an.
.utilities	Aksyon itilite nan fen ranje tèt la.

Eta

Eta	Deskripsyon
:optional	—

Tokens konsome

Token	Tip	Valè
--instui-background-color-page	—	—

Sou-konpozan

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

Ki gen rapò

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