CSS: wrapper ​

body[class~="instui-display-flex"] — שורת App-shell: ניווט צדדי, מכולה עם כותרת ולוח אופציונלי.

✅ השתמש ב-Wrapper כאשר:

  • בונים דף מוצר Canvas מלא שזקוק ל-shell פריסתי עקבי

  • הדף משתמש ב-GlobalNav כעוגן הניווט הראשי

  • הדף זקוק ללוחות צד: ContentTabList, TrailingContentArea, או UtilityPanel

  • דרושה ריווח פנימי עקבי של המכולה ורוחב מקסימלי לתוכן בכל הדף 🚫 אל תשתמשו ב-Wrapper כאשר:

  • בונים Modal, Tray, או Drawer — להם יש מכולות פריסה משלהם

  • עוטפים תת-אזור של דף — Wrapper מכיל את כל הדף, לא אזור בודד

נגישות ​

  • מיפו את אזור התוכן הראשי לאתר סמן <main> עם קישור קפיצת ניווט כך שמשתמשי מקלדת יוכלו לדלג על GlobalNav
  • העניקו ל-ContentTabList role="navigation" עם aria-label מובחן כגון "Page navigation" — נפרד מאתר הסמן של GlobalNav
  • העניקו ל-TrailingContentArea role="complementary" עם aria-label תיאורית שמשקפת את תוכנו, כגון "Student details"
  • העניקו לכל UtilityPanel aria-label מובחן: "AI assistant", "Notifications", או "Filters"
  • כאשר UtilityPanel נפתח, העבירו את הפוקוס ללוח; כאשר הוא נסגר, החזירו את הפוקוס לאלמנט שהפעיל אותו

שימוש ​

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

מבנה ​

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;

חריצים ​

חריץתיאור
contentתוכן הדף הראשי.
filtersתוכן מסננים אופציונלי בתוך הכותרת.
headerחריץ כותרת אופציונלי מתחת לתיאור הדף.
panelתוכן לוח העזר.
trailingתוכן משלים משמאל/מאחורה.

חלקים ​

חלקתיאור
.actionsלחצני כותרת אופציונליים בסוף השורה העליונה.
.containerעמודת הדף הראשית שמכילה את הכותרת והתוכן.
.contentאזור תוכן ראשי בתוך עמודת המכולה.
.descriptionתיאור דף אופציונלי מתחת לכותרת.
.filtersאזור מסננים אופציונלי בתוך הכותרת.
.headerאזור הכותרת בתוך עמודת המכולה.
.infoמכולה עבור כותרת הדף והתיאור האופציונלי.
.listעמודת ניווט אופציונלית בתוך התוכן.
.mainעמודת התוכן הראשית בתוך התוכן.
.panelאזור לוח העזר שנפתח בצד הימני של הדף.
.tabsכרטיסיות ניווט אופציונליות בתחילת שורת התוכן.
.titleכותרת הדף מתחת לשורה העליונה.
.topשורת גריד שמכילה Breadcrumbs וכלי עזר.
.trailingעמודה משלימה אופציונלית בתוך התוכן.
.utilitiesפעולות עזר בסוף השורה העליונה.

מצבים ​

מצבתיאור
:optional—

אסימוני צריכה ​

Tokenסוגערך
--instui-background-color-page——

תת־רכיבים ​

קשור ​