CSS: wrapper

body[class~="instui-display-flex"] — Ligne d'app-shell : navigation latérale, conteneur avec en-tête et panneau optionnel.

✅ Utiliser Wrapper quand :

• Construction d'une page produit Canvas complète nécessitant une coque de mise en page cohérente

• La page utilise GlobalNav comme ancre de navigation principale

• La page nécessite des panneaux latéraux : ContentTabList, TrailingContentArea, ou un UtilityPanel

• Vous avez besoin d'un padding de conteneur cohérent et d'une largeur maximale de contenu uniforme sur toute la page 🚫 Ne pas utiliser Wrapper quand :

• Construction d'une Modal, Tray ou Drawer — ceux-ci ont leurs propres conteneurs de mise en page

• Envelopper une sous-région d'une page — Wrapper contient la page entière, pas une région

Accessibilité

• Mappez la zone de contenu principale sur un repère <main> avec un lien skip-nav afin que les utilisateurs au clavier puissent contourner GlobalNav
• Donnez à ContentTabList role="navigation" avec un aria-label distinct tel que "Navigation de la page" — séparé du repère de GlobalNav
• Donnez à TrailingContentArea role="complementary" avec un aria-label descriptif reflétant son contenu, par exemple "Détails de l'étudiant"
• Donnez à chaque UtilityPanel un aria-label distinct : "AI assistant", "Notifications" ou "Filtres"
• Lorsqu'un UtilityPanel s'ouvre, déplacez le focus dans le panneau ; lorsqu'il se ferme, ramenez le focus sur le déclencheur qui l'a ouvert

Utilisation

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

Structure

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;

Emplacements (slots)

Emplacement	Description
content	Contenu principal de la page.
filters	Contenu facultatif des filtres à l'intérieur de l'en-tête.
header	Emplacement d'en-tête optionnel sous la description de la page.
panel	Contenu du panneau utilitaire.
trailing	Contenu complémentaire de fin de ligne.

Parties

Partie	Description
.actions	Boutons d'en-tête optionnels à la fin de la rangée supérieure.
.container	Colonne principale de la page qui contient l'en-tête et le contenu.
.content	Région de contenu principale à l'intérieur de la colonne conteneur.
.description	Description de page optionnelle sous le titre.
.filters	Zone de filtres optionnelle à l'intérieur de l'en-tête.
.header	Région d'en-tête à l'intérieur de la colonne conteneur.
.info	Conteneur pour le titre de la page et la description optionnelle.
.list	Colonne de navigation optionnelle à l'intérieur du contenu.
.main	Colonne de contenu principal à l'intérieur du contenu.
.panel	Région du panneau utilitaire qui s'ouvre du côté droit de la page.
.tabs	Onglets de navigation optionnels au début de la rangée de contenu.
.title	Titre de la page sous la rangée supérieure.
.top	Ligne de grille contenant les fil d'Ariane et les utilitaires.
.trailing	Colonne complémentaire optionnelle à l'intérieur du contenu.
.utilities	Actions utilitaires à la fin de la rangée supérieure.

États

État	Description
:optional	—

Jetons consommés

Token	Type	Valeur
--instui-background-color-page	—	—

Sous-composants

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

Liés

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