CSS: wrapper ​

body[class~="instui-display-flex"] — ردیف پوستهٔ برنامه: ناوبری کناری، کانتینری با هدر، و پنل اختیاری.

✅ هنگام استفاده از Wrapper:

  • ساخت یک صفحهٔ محصول کامل Canvas که به یک پوستهٔ طراحی ثابت نیاز دارد

  • صفحه از GlobalNav به‌عنوان لنگر اصلی ناوبری استفاده می‌کند

  • صفحه به پنل‌های کناری نیاز دارد: ContentTabList، TrailingContentArea، یا UtilityPanel

  • نیاز به فاصلهٔ داخلی کانتینر و حداکثر عرض محتوا‌ی یکسان در سراسر صفحه دارد 🚫 هنگام استفاده از Wrapper نکنید:

  • ساخت Modal، Tray، یا Drawer — این‌ها کانتینرهای لایه‌بندی مخصوص خود را دارند

  • پیچاندن یک زیر-بخش از صفحه — Wrapper کل صفحه را در بر می‌گیرد، نه یک ناحیهٔ جزئی

دسترس‌پذیری ​

  • نگاشت ناحیهٔ محتوای اصلی به یک نشانهٔ <main> با لینک skip-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;

شکاف‌ها (Slots) ​

شکافتوضیحات
contentمحتوای اصلی صفحه.
filtersمحتوای فیلترهای اختیاری داخل هدر.
headerشیار هدر اختیاری زیر توضیحات صفحه.
panelمحتوای پنل ابزار (Utility panel).
trailingمحتوای تکمیلی انتهایی (Trailing complementary content).

قسمت‌ها ​

قسمتتوضیحات
.actionsدکمه‌های اختیاری هدر در انتهای ردیف بالایی.
.containerستون اصلی صفحه که هدر و محتوا را نگه می‌دارد.
.contentناحیهٔ محتوای اصلی داخل ستون کانتینر.
.descriptionتوضیحات اختیاری صفحه زیر عنوان.
.filtersناحیهٔ فیلترهای اختیاری داخل هدر.
.headerناحیهٔ هدر داخل ستون کانتینر.
.infoکانتینر برای عنوان صفحه و توضیح اختیاری.
.listستون ناوبری اختیاری داخل محتوا.
.mainستون محتوای اصلی داخل محتوا.
.panelناحیهٔ پنل ابزار که در سمت راست صفحه باز می‌شود.
.tabsتب‌های ناوبری اختیاری در ابتدای ردیف محتوا.
.titleعنوان صفحه زیر ردیف بالایی.
.topردیف شبکه‌ای حاوی breadcrumbs و ابزارها.
.trailingستون تکمیلی اختیاری داخل محتوا.
.utilitiesاقدامات ابزار در انتهای ردیف بالایی.

حالت‌ها ​

وضعیتتوضیحات
:optional—

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-background-color-page——

زیرمولفه‌ها ​

مرتبط ​