CSS: wrapper

body[class~="instui-display-flex"] — Sraith app-shell: nascleanúin taobh, coimeádán le ceannlíne, agus painéal roghnach.

✅ Úsáid Wrapper nuair a:

• Ag tógáil leathanach táirgí iomlán Canvas a dteastaíonn cliabhán leaganaithe comhsheasmhach uaidh

• Úsáideann an leathanach GlobalNav mar an príomh-anchór nascleanúna

• Tá gá le painéil thaobh: ContentTabList, TrailingContentArea, nó UtilityPanel

• Tá gá le padding coimeádáin comhsheasmhach agus leithead uasta ábhair trasna an leathanaigh iomláin 🚫 Ná húsáid Wrapper nuair a:

• Ag tógáil Modal, Tray, nó Drawer — tá coimeádáin leaganaithe féin acu sin

• Ag clúdach fo-earnáil de leathanach — cuimsíonn Wrapper an leathanach iomlán, ní réigiún amháin

Inrochtaineacht

• Léirigh an príomh-áit ábhair mar lárionad <main> le nasc skip-nav ionas gur féidir le húsáideoirí méarchláir GlobalNav a sheachaint
• Tabhair ról ContentTabList="navigation" le aria-label ar leith amhail "Page navigation" — ar leith ó lárionad GlobalNav
• Tabhair ról TrailingContentArea="complementary" le aria-label cur síosach a léiríonn a chuid ábhar, mar "Sonraí mac léinn"
• Tabhair aria-label ar leith do gach UtilityPanel: "AI assistant", "Notifications", nó "Filters"
• Nuair a osclaítear UtilityPanel, bog fócas isteach sa phainéal; nuair a dhúnann sé, tabhair an fócas ar ais don spreagadh a d'oscail é

Úsáid

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

Struchtúr

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;

Sliotáin

Sliotán	Cur síos
content	Príomh-ábhar an leathanaigh.
filters	Ábhar scagairí roghnach taobh istigh den cheannlíne.
header	Sliotán ceannlíne roghnach thíos an tuairisc leathanaigh.
panel	Ábhar an phainéil chabhrach.
trailing	Ábhar comhlántach deireanach.

Codanna

Cuid	Cur síos
.actions	Cnaipe ceannlíne roghnach ag deireadh an tsraith uachtair.
.container	Colún príomh-leathanaigh a choinníonn ceannlíne agus ábhar.
.content	Réigiún ábhair príomhúil taobh istigh den cholún coimeádáin.
.description	Tuairisc leathanaigh roghnach thíos an teidil.
.filters	Réigiún scagairí roghnach taobh istigh den cheannlíne.
.header	Réigiún ceannlíne taobh istigh den cholún coimeádáin.
.info	Coimeádán don teideal leathanaigh agus tuairisc roghnach.
.list	Colún nascleanúna roghnach taobh istigh den ábhar.
.main	Colún ábhair príomha taobh istigh den ábhar.
.panel	Réigiún painéil chabhrach a osclaíonn ar thaobh na láimhe deise den leathanach.
.tabs	Cluaisíní nascleanúna roghnacha ag tús sraithe ábhar.
.title	Teideal an leathanaigh thíos an tsraith uachtair.
.top	Sraith gréasáin ina bhfuil breadcrumbs agus uirlisí.
.trailing	Colún comhlántach roghnach taobh istigh den ábhar.
.utilities	Gníomhaíochtaí uirlisí ag deireadh an tsraith uachtair.

Stáit

Stát	Cur síos
:optional	—

Tóicíní a úsáideadh

Token	Cineál	Luach
--instui-background-color-page	—	—

Fo-chomhpháirteanna

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

Gaolmhar

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