CSS: wrapper

body[class~="instui-display-flex"] — App-shell röð: hliðarvalmynd, gámi með haus og valfrjáls spjald.

✅ Notaðu Wrapper þegar:

• Byggir fulla Canvas vöru síðu sem þarf samræmda uppsetningu

• Síðan notar GlobalNav sem aðal siglingarfestu

• Síðan þarf hliðarspjöld: ContentTabList, TrailingContentArea, eða UtilityPanel

• Þú þarft samræmda fyllingu innan gámsins og hámarksbreidd efnis yfir alla síðuna 🚫 Ekki nota Wrapper þegar:

• Byggir Modal, Tray, eða Drawer — þau hafa sín eigin uppsetningargáma

• Umlykur undir-hluta af síðu — Wrapper inniheldur alla síðuna, ekki svæði

Aðgengi

• Kortleggðu aðalefnissvæðið sem <main> landamerki með skip-nav tengli svo lyklaborðsnotendur geti hoppað yfir GlobalNav
• Gefðu ContentTabList role="navigation" með sérstæðu aria-label eins og "Page navigation" — aðskilið frá landamerki GlobalNav
• Gefðu TrailingContentArea role="complementary" með lýsandi aria-label sem endurspeglar efnið, til dæmis "Student details"
• Gefðu hverju UtilityPanel sérstakt aria-label: "AI assistant", "Notifications", eða "Filters"
• Þegar UtilityPanel opnast, færðu fókus inn í spjaldið; þegar það lokast, skilaðu fókus aftur á þáttinn sem opnaði það

Notkun

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

Uppbygging

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;

Raufar

Rauf	Lýsing
content	Aðalefni síðunnar.
filters	Valfrjálst síu efni innan haus.
header	Valfrjáls haus-sláttur fyrir neðan síðu lýsingu.
panel	Innihald Utility spjalds.
trailing	Eftirfylgjandi fylling (complementary) efnis.

Hlutar

Hluti	Lýsing
.actions	Valfrjáls haus-takkar í lok efstu röðar.
.container	Aðal dálkur síðunnar sem heldur haus og efni.
.content	Aðalefnissvæði innan gámsins (container) dálks.
.description	Valfrjáls síðu lýsing fyrir neðan titil.
.filters	Valfrjálst síu svæði innan haus.
.header	Haus svæði innan gáms dálksins.
.info	Gámur fyrir síðu titil og valfrjálsa lýsingu.
.list	Valfrjáls siglingar-dálkur innan efnis.
.main	Aðal efnis dálkurinn innan efnis.
.panel	Utility spjaldssvæði sem opnast hægra megin á síðunni.
.tabs	Valfrjáls siglingatakkar í byrjun efnisröðar.
.title	Síðu titill fyrir neðan efstu röð.
.top	Röð í rist sem inniheldur brauðmolar (breadcrumbs) og aðgerðir.
.trailing	Valfrjáls fyllingardálkur (complementary) innan efnis.
.utilities	Utility aðgerðir í lok efstu röðar.

Stöður

Staða	Lýsing
:optional	—

Notuð tákn

Token	Tegund	Gildi
--instui-background-color-page	—	—

Undirhlutir

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

Tengdar

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