CSS: wrapper

body[class~="instui-display-flex"] — Hàng app-shell: điều hướng bên, vùng chứa với đầu trang, và bảng điều khiển tùy chọn.

✅ Sử dụng Wrapper khi:

• Xây dựng một trang sản phẩm Canvas đầy đủ cần một khung bố cục nhất quán

• Trang sử dụng GlobalNav làm neo điều hướng chính

• Trang cần các bảng điều khiển bên: ContentTabList, TrailingContentArea, hoặc UtilityPanel

• Cần khoảng đệm vùng chứa và độ rộng tối đa nội dung nhất quán trên toàn trang 🚫 Không dùng Wrapper khi:

• Xây dựng Modal, Tray, hoặc Drawer — những thành phần đó có vùng chứa bố cục riêng

• Bao một phần con của trang — Wrapper chứa toàn bộ trang, không phải một vùng

Khả năng truy cập

• Gán khu vực nội dung chính vào một mốc <main> với liên kết bỏ qua-nav để người dùng bàn phím có thể vượt qua GlobalNav
• Gán ContentTabList role="navigation" với aria-label riêng, ví dụ "Page navigation" — tách biệt khỏi mốc của GlobalNav
• Gán TrailingContentArea role="complementary" với aria-label mô tả phản ánh nội dung, ví dụ "Student details"
• Gán mỗi UtilityPanel một aria-label riêng: "AI assistant", "Notifications", hoặc "Filters"
• Khi một UtilityPanel mở, đưa tiêu điểm (focus) vào panel; khi đóng, trả focus về trigger đã mở nó

Sử dụng

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

Cấu trúc

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;

Các slot

Slot	Mô tả
content	Nội dung chính của trang.
filters	Nội dung bộ lọc tùy chọn bên trong đầu trang.
header	Slot đầu trang tùy chọn phía dưới mô tả trang.
panel	Nội dung bảng điều khiển tiện ích.
trailing	Nội dung bổ trợ phía sau.

Phần

Phần	Mô tả
.actions	Các nút đầu trang tùy chọn ở cuối hàng trên cùng.
.container	Cột chính của trang chứa đầu trang và nội dung.
.content	Vùng nội dung chính bên trong cột vùng chứa.
.description	Mô tả trang tùy chọn dưới tiêu đề.
.filters	Khu vực bộ lọc tùy chọn bên trong đầu trang.
.header	Khu vực đầu trang bên trong cột vùng chứa.
.info	Vùng chứa cho tiêu đề trang và mô tả tùy chọn.
.list	Cột điều hướng tùy chọn bên trong nội dung.
.main	Cột nội dung chính bên trong nội dung.
.panel	Khu vực bảng điều khiển tiện ích mở ở phía phải của trang.
.tabs	Tab điều hướng tùy chọn ở đầu hàng nội dung.
.title	Tiêu đề trang dưới hàng trên cùng.
.top	Hàng lưới chứa breadcrumbs và các tiện ích.
.trailing	Cột bổ trợ tùy chọn bên trong nội dung.
.utilities	Hành động tiện ích ở cuối hàng trên cùng.

Trạng thái

Trạng thái	Mô tả
:optional	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-background-color-page	—	—

Các thành phần phụ

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

Liên quan

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