CSS: wrapper

body[class~="instui-display-flex"] — vrstica lupine aplikacije: stranska navigacija, kontejner z glavo in opcijski panel.

✅ Uporabite Wrapper, kadar:

• Gradite celotno stran izdelka Canvas, ki potrebuje konsistentno postavitev lupine

• Stran uporablja GlobalNav kot glavni navigacijski sidro

• Stran potrebuje stranske panele: ContentTabList, TrailingContentArea ali UtilityPanel

• Potrebujete enotno polnilo kontejnerja in največjo širino vsebine po celotni strani 🚫 Ne uporabljajte Wrapper, kadar:

• Gradite Modal, Tray ali Drawer — ti imajo svoje postavitvene kontejnere

• Zavijate pododsek strani — Wrapper vsebuje celotno stran, ne regijo

Dostopnost

• Označite glavno vsebinsko območje z oznako <main> in povezavo za preskok, da lahko uporabniki na tipkovnici preskočijo GlobalNav
• Dajte ContentTabList role="navigation" z ločenim aria-label, na primer "Page navigation" — ločeno od GlobalNav-ovega znamenja
• Dajte TrailingContentArea role="complementary" z opisnim aria-labelom, ki odraža njegovo vsebino, na primer "Student details"
• Dajte vsakemu UtilityPanelu ločen aria-label: "AI assistant", "Notifications" ali "Filters"
• Ko se UtilityPanel odpre, premaknite fokus v panel; ko se zapre, vrnite fokus na sprožilec, ki ga je odprl

Uporaba

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

Struktura

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;

Sloti

Slot	Opis
content	Primarna vsebina strani.
filters	Neobvezna vsebina filtrov znotraj glave.
header	Neobvezna reža za glavo pod opisom strani.
panel	Vsebina uporabniškega panela.
trailing	Trailing komplementarna vsebina.

Delii

Del	Opis
.actions	Neobvezni gumbi v glavi na koncu zgornje vrstice.
.container	Glavni stolpec strani, ki drži glavo in vsebino.
.content	Primarno vsebinsko območje znotraj stolpca kontejnerja.
.description	Neobvezen opis strani pod naslovom.
.filters	Neobvezno območje filtrov znotraj glave.
.header	Območje glave znotraj stolpca kontejnerja.
.info	Kontejner za naslov strani in neobvezen opis.
.list	Neobvezen navigacijski stolpec znotraj vsebine.
.main	Glavni vsebinski stolpec znotraj vsebine.
.panel	Območje Utility panela, ki se odpre na desni strani strani.
.tabs	Neobvezne navigacijske zavihke na začetku vrstice vsebine.
.title	Naslov strani pod zgornjo vrstico.
.top	Mrežna vrstica, ki vsebuje drobtinice in pripomočke.
.trailing	Neobvezen komplementarni stolpec znotraj vsebine.
.utilities	Dejanja uporabniških orodij na koncu zgornje vrstice.

Stanja

Stanje	Opis
:optional	—

Porabljeni žetoni

Token	Tip	Vrednost
--instui-background-color-page	—	—

Podkomponente

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

Sorodno

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