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 відкривається, перемістіть фокус у панель; коли вона закривається, поверніть фокус до тригера, який її відкрив

Використання

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

Структура

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	Доповнювальний контент у кінці (trailling).

Частини

Частина	Опис
.actions	Необов’язкові кнопки заголовка в кінці верхнього рядка.
.container	Головна колонка сторінки, що містить заголовок і вміст.
.content	Головна зона контенту всередині колонки контейнера.
.description	Необов’язковий опис сторінки під заголовком.
.filters	Необов’язкова область фільтрів усередині заголовка.
.header	Область заголовка всередині колонки контейнера.
.info	Контейнер для назви сторінки та необов’язкового опису.
.list	Необов’язкова колонка навігації всередині контенту.
.main	Колонка основного контенту всередині секції контенту.
.panel	Область утилітарної панелі, яка відкривається праворуч від сторінки.
.tabs	Необов’язкові навігаційні вкладки на початку рядка контенту.
.title	Заголовок сторінки під верхнім рядком.
.top	Ряд сітки, що містить breadcrumbs і утиліти.
.trailing	Необов’язкова додаткова колонка всередині контенту.
.utilities	Утилітарні дії в кінці верхнього рядка.

Стані

Стан	Опис
:optional	—

Використано токенів

Token	Тип	Значення
--instui-background-color-page	—	—

Підкомпоненти

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

Пов'язані

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