CSS: wrapper ​

body[class~="instui-display-flex"] — แถวของ App-shell: แถบด้านข้าง, คอนเทนเนอร์ที่มีส่วนหัว, และแผงตัวเลือก

✅ ใช้ 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;

สล็อต ​

สล็อตคำอธิบาย
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——

ส่วนประกอบย่อย ​

ที่เกี่ยวข้อง ​