CSS: wrapper

body[class~="instui-display-flex"] — γραμμή κελύφους εφαρμογής: πλευρική πλοήγηση, κοντέινερ με κεφαλίδα και προαιρετικό πάνελ.

✅ Χρησιμοποιήστε το Wrapper όταν:

• Δημιουργείτε μια πλήρη σελίδα προϊόντος Canvas που χρειάζεται συνεπή διάταξη κελύφους

• Η σελίδα χρησιμοποιεί το GlobalNav ως την κύρια άγκυρα πλοήγησης

• Η σελίδα χρειάζεται πλευρικά πάνελ: ContentTabList, TrailingContentArea, ή UtilityPanel

• Χρειάζεστε συνεπή padding του κοντέινερ και μέγιστο πλάτος περιεχομένου σε όλη τη σελίδα 🚫 Μην χρησιμοποιείτε το Wrapper όταν:

• Δημιουργείτε Modal, Tray ή Drawer — αυτά έχουν τα δικά τους κοντέινερ διάταξης

• Περιβάλλετε ένα υποτμήμα της σελίδας — το Wrapper περιέχει ολόκληρη τη σελίδα, όχι μια περιοχή

Προσβασιμότητα

• Χαρτογραφήστε την κύρια περιοχή περιεχομένου σε ένα <main> landmark με σύνδεσμο skip-nav ώστε οι χρήστες με πληκτρολόγιο να μπορούν να παρακάμψουν το GlobalNav
• Δώστε στο ContentTabList role="navigation" με ξεχωριστό aria-label όπως "Page navigation" — ξεχωριστό από το landmark του 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;

Θέσεις (slots)

Θέση (slot)	Περιγραφή
content	Κύριο περιεχόμενο της σελίδας.
filters	Προαιρετικό περιεχόμενο φίλτρων μέσα στην κεφαλίδα.
header	Προαιρετική θέση κεφαλίδας κάτω από την περιγραφή της σελίδας.
panel	Περιεχόμενο του πάνελ βοηθητικών λειτουργιών.
trailing	Συμπληρωματικό περιεχόμενο στο τέλος.

Μέρη

Μέρος	Περιγραφή
.actions	Προαιρετικά κουμπιά κεφαλίδας στο τέλος της κορυφαίας γραμμής.
.container	Κύρια στήλη σελίδας που κρατά την κεφαλίδα και το περιεχόμενο.
.content	Πρωτεύουσα περιοχή περιεχομένου μέσα στη στήλη του κοντέινερ.
.description	Προαιρετική περιγραφή σελίδας κάτω από τον τίτλο.
.filters	Προαιρετική περιοχή φίλτρων μέσα στην κεφαλίδα.
.header	Περιοχή κεφαλίδας μέσα στη στήλη του κοντέινερ.
.info	Κοντέινερ για τον τίτλο της σελίδας και την προαιρετική περιγραφή.
.list	Προαιρετική στήλη πλοήγησης μέσα στο περιεχόμενο.
.main	Κύρια στήλη περιεχομένου μέσα στο περιεχόμενο.
.panel	Περιοχή UtilityPanel που ανοίγει στη δεξιά πλευρά της σελίδας.
.tabs	Προαιρετικές καρτέλες πλοήγησης στην αρχή της γραμμής περιεχομένου.
.title	Τίτλος σελίδας κάτω από την κορυφαία γραμμή.
.top	Γραμμή πλέγματος που περιέχει breadcrumbs και βοηθητικά στοιχεία.
.trailing	Προαιρετική συμπληρωματική στήλη μέσα στο περιεχόμενο.
.utilities	Ενέργειες βοηθητικών λειτουργιών στο τέλος της κορυφαίας γραμμής.

Καταστάσεις

Κατάσταση	Περιγραφή
:optional	—

Καταναλωμένα tokens

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