CSS: wrapper ​

body[class~="instui-display-flex"] — Wiersz szkieletu aplikacji: nawigacja boczna, kontener z nagłówkiem i opcjonalny panel.

✅ Użyj Wrapper, gdy:

  • Budujesz pełną stronę produktu Canvas, która wymaga spójnej powłoki układu

  • Strona używa GlobalNav jako głównego punktu nawigacji

  • Strona potrzebuje paneli bocznych: ContentTabList, TrailingContentArea lub UtilityPanel

  • Potrzebujesz spójnych odstępów kontenera i maksymalnej szerokości treści na całej stronie 🚫 Nie używaj Wrapper, gdy:

  • Tworzysz Modal, Tray lub Drawer — te elementy mają własne kontenery układu

  • Owijasz podsekcję strony — Wrapper zawiera całą stronę, a nie pojedynczy obszar

Dostępność ​

  • Oznacz główny obszar treści znacznikiem <main> z linkiem skip-nav, aby użytkownicy klawiatury mogli ominąć GlobalNav
  • Nadaj ContentTabList role="navigation" z wyróżniającą etykietą aria-label, np. "Nawigacja po stronie" — oddzieloną od landmarku GlobalNav
  • Nadaj TrailingContentArea role="complementary" z opisową etykietą aria-label, która odzwierciedla jej zawartość, np. "Szczegóły studenta"
  • Nadaj każdemu UtilityPanel wyróżniającą etykietę aria-label: "Asystent AI", "Powiadomienia" lub "Filtry"
  • Kiedy UtilityPanel się otwiera, przenieś fokus do panelu; kiedy się zamyka, przywróć fokus do elementu wywołującego go

Użycie ​

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

Struktura ​

text
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;

Sloty ​

SlotOpis
contentGłówna zawartość strony.
filtersOpcjonalna zawartość filtrów w nagłówku.
headerOpcjonalne miejsce na nagłówek poniżej opisu strony.
panelZawartość panelu narzędziowego.
trailingDodatkowa treść uzupełniająca (Trailing).

Części ​

CzęśćOpis
.actionsOpcjonalne przyciski nagłówka na końcu górnego wiersza.
.containerGłówna kolumna strony zawierająca nagłówek i treść.
.contentGłówny obszar treści wewnątrz kolumny kontenera.
.descriptionOpcjonalny opis strony pod tytułem.
.filtersOpcjonalny obszar filtrów wewnątrz nagłówka.
.headerObszar nagłówka wewnątrz kolumny kontenera.
.infoKontener dla tytułu strony i opcjonalnego opisu.
.listOpcjonalna kolumna nawigacyjna wewnątrz treści.
.mainGłówna kolumna treści wewnątrz sekcji content.
.panelObszar panelu narzędziowego, który otwiera się po prawej stronie strony.
.tabsOpcjonalne karty nawigacyjne na początku wiersza treści.
.titleTytuł strony poniżej górnego wiersza.
.topWiersz siatki zawierający okruszki nawigacyjne i narzędzia.
.trailingOpcjonalna kolumna uzupełniająca wewnątrz treści.
.utilitiesAkcje narzędziowe na końcu górnego wiersza.

Stany ​

StanOpis
:optional—

Zużyte tokeny ​

TokenTypWartość
--instui-background-color-page——

Subkomponenty ​

Powiązane ​