CSS: wrapper

body[class~="instui-display-flex"] — Sovelluskuoren rivi: sivunavigaatio, otsikolla varustettu säiliö ja valinnainen paneeli.

✅ Käytä Wrapperia, kun:

• Rakennetaan täysi Canvas-tuotesivu, joka tarvitsee yhdenmukaisen asettelukuoren

• Sivulla käytetään GlobalNavia ensisijaisena navigaation ankkurina

• Sivulla tarvitaan sivupaneeleita: ContentTabList, TrailingContentArea tai UtilityPanel

• Tarvitaan yhtenäinen säiliön täyte ja sisällön enimmäisleveys koko sivulla 🚫 Älä käytä Wrapperia, kun:

• Rakennetaan Modal, Tray tai Drawer — niillä on omat asettelusäiliönsä

• Kääritään sivun aliosiota — Wrapper kattaa koko sivun, ei vain aluetta

Saavutettavuus

• Määritä pääsisältöalue <main>-maamerkiksi ja lisää skip-nav-linkki, jotta näppäimistön käyttäjät voivat ohittaa GlobalNavin
• Anna ContentTabListille role="navigation" ja erottuva aria-label, esimerkiksi "Page navigation" — erillinen GlobalNavin maamerkistä
• Anna TrailingContentArealle role="complementary" ja kuvaava aria-label, joka kertoo sen sisällöstä, esimerkiksi "Student details"
• Anna jokaiselle UtilityPanelille erillinen aria-label: "AI assistant", "Notifications" tai "Filters"
• Kun UtilityPanel avataan, siirrä fokus paneeliin; kun se suljetaan, palauta fokus siihen laukaisimeen, joka avasi paneelin

Käyttö

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

Rakenne

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;

Slotit

Paikka	Kuvaus
content	Sivun ensisijainen sisältö.
filters	Valinnaiset suodattimet otsikon sisällä.
header	Valinnainen otsikkopaikka sivun kuvauksen alapuolella.
panel	Utility-paneelin sisältö.
trailing	Jäljelle jäävä täydentävä sisältö.

Osat

Osa	Kuvaus
.actions	Valinnaiset otsikkopainikkeet ylärivin lopussa.
.container	Sivun pääsarakke, joka sisältää otsikon ja sisällön.
.content	Ensisijainen sisältöalue säiliösarakkeen sisällä.
.description	Valinnainen sivun kuvaus otsikon alapuolella.
.filters	Valinnainen suodattimet-alue otsikon sisällä.
.header	Otsikkoalue säiliösarakkeen sisällä.
.info	Säiliö sivun otsikolle ja valinnaiselle kuvaukselle.
.list	Valinnainen navigointisarakku sisällön sisällä.
.main	Pääsisältösarake sisällön sisällä.
.panel	Utility-paneelin alue, joka avautuu sivun oikealle puolelle.
.tabs	Valinnaiset navigointivälilehdet sisällörivin alussa.
.title	Sivun otsikko ylärivin alapuolella.
.top	Ruudun rivi, joka sisältää leivänmurut ja apuvälineet.
.trailing	Valinnainen täydentävä sarake sisällön sisällä.
.utilities	Utility-toiminnot ylärivin lopussa.

Tilat

Tila	Kuvaus
:optional	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--instui-background-color-page	—	—

Alikomponentit

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

Liittyvät

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