CSS: wrapper

body[class~="instui-display-flex"] — Riga della app-shell: navigazione laterale, contenitore con header e pannello opzionale.

✅ Usare Wrapper quando:

• Si sta costruendo una pagina prodotto Canvas completa che richiede un shell di layout coerente

• La pagina usa GlobalNav come ancora principale di navigazione

• La pagina necessita di pannelli laterali: ContentTabList, TrailingContentArea o una UtilityPanel

• È necessario un padding del contenitore e una larghezza massima del contenuto coerenti su tutta la pagina 🚫 Non usare Wrapper quando:

• Si sta costruendo una Modal, Tray o Drawer — questi hanno i propri contenitori di layout

• Si avvolge una sottosezione della pagina — Wrapper contiene l'intera pagina, non una regione

Accessibilità

• Mappare l'area principale del contenuto a un landmark <main> con un link skip-nav così gli utenti da tastiera possono bypassare GlobalNav
• Dare a ContentTabList role="navigation" con un aria-label distinto come "Page navigation" — separato dal landmark di GlobalNav
• Dare a TrailingContentArea role="complementary" con un aria-label descrittivo che rifletta il suo contenuto, ad esempio "Student details"
• Dare a ogni UtilityPanel un aria-label distinto: "AI assistant", "Notifications" o "Filters"
• Quando si apre una UtilityPanel, spostare il focus all'interno del pannello; quando si chiude, restituire il focus al trigger che l'ha aperta

Uso

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

Struttura

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	Descrizione
content	Contenuto principale della pagina.
filters	Contenuto opzionale dei filtri all'interno dell'header.
header	Slot opzionale dell'header sotto la descrizione della pagina.
panel	Contenuto del pannello di utilità.
trailing	Contenuto complementare finale.

Parti

Parte	Descrizione
.actions	Pulsanti opzionali dell'header alla fine della riga superiore.
.container	Colonna principale della pagina che contiene header e contenuto.
.content	Regione di contenuto primaria all'interno della colonna del contenitore.
.description	Descrizione opzionale della pagina sotto il titolo.
.filters	Regione opzionale dei filtri all'interno dell'header.
.header	Regione header all'interno della colonna del contenitore.
.info	Contenitore per il titolo della pagina e la descrizione opzionale.
.list	Colonna di navigazione opzionale all'interno del contenuto.
.main	Colonna del contenuto principale all'interno del contenuto.
.panel	Regione del pannello di utilità che si apre sul lato destro della pagina.
.tabs	Schede di navigazione opzionali all'inizio della riga di contenuto.
.title	Titolo della pagina sotto la riga superiore.
.top	Riga della griglia contenente breadcrumb e utility.
.trailing	Colonna complementare opzionale all'interno del contenuto.
.utilities	Azioni di utilità alla fine della riga superiore.

Stati

Stato	Descrizione
:optional	—

Token consumati

Token	Tipo	Valore
--instui-background-color-page	—	—

Sottocomponenti

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

Correlati

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