CSS: wrapper ​

body[class~="instui-display-flex"] — صف قشرة التطبيق: شريط جانبي للملاحة، حاوية بها رأس، ولوحة اختيارية.

✅ استخدم Wrapper عندما:

  • بناء صفحة منتج كاملة على Canvas تحتاج إلى قشرة تخطيط متسقة

  • تستخدم الصفحة GlobalNav كنقطة ربط للملاحة الأساسية

  • تحتاج الصفحة إلى لوحات جانبية: ContentTabList، TrailingContentArea، أو UtilityPanel

  • تحتاج إلى هوامش حاوية متسقة وعرض محتوى أقصى موحد عبر الصفحة بالكامل 🚫 لا تستخدم Wrapper عندما:

  • بناء Modal أو Tray أو Drawer — لها حاويات تخطيط خاصة بها

  • تغليف جزء فرعي من الصفحة — Wrapper يحتوي الصفحة كاملة، وليس منطقة فقط

سهولة الوصول ​

  • عين منطقة المحتوى الرئيسية كمعلم <main> مع رابط تخطي-nav حتى يتمكن مستخدمو لوحة المفاتيح من تجاوز 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صف شبكي يحتوي على شريط تنقل الأدلة and الأدوات المساعدة.
.trailingعمود تكميلي اختياري داخل المحتوى.
.utilitiesإجراءات الأدوات في نهاية الصف العلوي.

الحالات ​

حالةالوصف
:optional—

الرموز المستهلكة ​

Tokenنوعقيمة
--instui-background-color-page——

مكونات فرعية ​

ذات صلة ​