CSS: wrapper

body[class~="instui-display-flex"] — Uygulama kabuğu satırı: yan gezinme, başlıklı konteyner ve isteğe bağlı panel.

✅ Wrapper kullanıldığında:

• Tutarlı bir düzen kabuğuna ihtiyaç duyan tam bir Canvas ürün sayfası oluşturuluyorsa

• Sayfa birincil gezinme noktası olarak GlobalNav kullanıyorsa

• Sayfa yan panellere ihtiyaç duyuyorsa: ContentTabList, TrailingContentArea veya bir UtilityPanel

• Sayfa genelinde tutarlı konteyner dolgu ve içerik maksimum genişliği gerekiyorsa 🚫 Wrapper kullanılmaması gereken durumlar:

• Modal, Tray veya Drawer inşa ediliyorsa — bunların kendi düzen konteynerleri vardır

• Bir sayfanın alt bölümünü sarmak istiyorsanız — Wrapper tüm sayfayı kapsar, bir bölgeyi değil

Erişilebilirlik

• Ana içerik alanını, klavye kullanıcılarının GlobalNav'i atlaması için bir atla-gezinme bağlantısıyla <main> işaretine eşleyin
• ContentTabList'e "Page navigation" gibi GlobalNav'ın işaretinden ayrı, belirgin bir aria-label ile role="navigation" verin
• TrailingContentArea'ya içeriğini yansıtan açıklayıcı bir aria-label ile role="complementary" verin; örn. "Öğrenci detayları"
• Her UtilityPanel'e ayrı bir aria-label verin: "AI assistant", "Notifications" veya "Filters"
• Bir UtilityPanel açıldığında odağı panele taşıyın; kapandığında açan tetikleyiciye odağı geri verin

Kullanım

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

Yapı

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;

Yuvalar

Yuva	Açıklama
content	Birincil sayfa içeriği.
filters	Başlık içindeki isteğe bağlı filtre içeriği.
header	Sayfa açıklamasının altındaki isteğe bağlı başlık yuvası.
panel	Yardımcı panel içeriği.
trailing	Bitiş tamamlayıcı içerik.

Bölümler

Parça	Açıklama
.actions	Üst satırın sonunda isteğe bağlı başlık düğmeleri.
.container	Başlık ve içeriği tutan ana sayfa sütunu.
.content	Konteyner sütunu içindeki birincil içerik bölgesi.
.description	Başlığın altındaki isteğe bağlı sayfa açıklaması.
.filters	Başlık içindeki isteğe bağlı filtreler bölgesi.
.header	Konteyner sütunu içindeki başlık bölgesi.
.info	Sayfa başlığı ve isteğe bağlı açıklama için konteyner.
.list	İçerik içinde isteğe bağlı gezinme sütunu.
.main	İçerik içindeki ana içerik sütunu.
.panel	Sayfanın sağ tarafında açılan yardımcı panel bölgesi.
.tabs	İçerik satırının başında isteğe bağlı gezinme sekmeleri.
.title	Üst satırın altındaki sayfa başlığı.
.top	Breadcrumbs ve yardımcı öğeleri içeren grid satırı.
.trailing	İçerik içinde isteğe bağlı tamamlayıcı sütun.
.utilities	Üst satırın sonunda yer alan yardımcı eylemler.

Durumlar

Durum	Açıklama
:optional	—

Tüketilen tokenler

Token	Tür	Değer
--instui-background-color-page	—	—

Alt bileşenler

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

İlgili

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