CSS: wrapper

body[class~="instui-display-flex"] — Rārangi app-shell: nav taha, ipu me te upoko, me tētahi anga kōwhiringa.

✅ Whakamahia te Wrapper ina:

• E waihanga ana i tētahi whārangi hua Canvas katoa e hiahiatia ana he anga āhua tuturu

• Ka whakamahi te whārangi i te GlobalNav hei tūāpapa whakatere matua

• Ka hiahia te whārangi ki ngā panui taha: ContentTabList, TrailingContentArea, rānei he UtilityPanel

• E hiahia ana koe ki te pātūriki ipu tūroa me te whānui mō te ihirangi i runga i te whārangi katoa 🚫 Kaua e whakamahia te Wrapper ina:

• E waihanga ana i tētahi Mōtini (Modal), Tray, rānei Drawer — he ipu ā rātou ake ngā tārua anga

• E pūwrapa ana i tētahi wāhanga o te whārangi — ko te Wrapper te nuinga o te whārangi katoa, ehara i te rohe anake

Wātea mō te katoa

• Mahia te waahi ihirangi matua kia tēnei hei tohu <main> me tētahi hononga skip-nav kia taea e ngā kaiwhakamahi papapāho te whakakāhore i te GlobalNav
• Whakaratohia te ContentTabList ki te role="navigation" me tētahi aria-label motuhake pēnei i te "Whakatere whārangi" — wehe atu i te tohu o te GlobalNav
• Whakaratohia te TrailingContentArea ki te role="complementary" me tētahi aria-label whakamārama e whakaata ana i tōna ihirangi, pēnei i te "Ngā taipitopito ākonga"
• Whakaratohia ki ia UtilityPanel tētahi aria-label motuhake: "Kaiawhina AI", "Ngā whakamōhiotanga", rānei "Tātari"
• Ina whakatuwhera tētahi UtilityPanel, nekehia te arotahi ki roto i te panui; ina kati, whakahokia te arotahi ki te anga i whakatuwhera i taua panui

Ngā Whakamahi

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

Hanganga

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;

Wāhi

Wāhi	Whakamārama
content	Te ihirangi whārangi matua.
filters	Ngā ihirangi tātari kōwhiringa i roto i te upoko.
header	Tūnga upoko kōwhiringa i raro i te whakaahuatanga whārangi.
panel	Ihirangi panui āwhina (utility panel).
trailing	Ihirangi atu hei āwhina āpiti.

Wāhanga

Wāhanga	Whakamārama
.actions	Ngā pātene upoko kōwhiringa i te mutunga o te rārangi o runga.
.container	Tīwae matua o te whārangi e pupuri ana i te upoko me te ihirangi.
.content	Rohe ihirangi matua i roto i te tīwae ipu.
.description	Whakaahuatanga whārangi kōwhiringa i raro i te taitara.
.filters	Rohe tātari kōwhiringa i roto i te upoko.
.header	Rohe upoko i roto i te tīwae ipu.
.info	Ipu mō te taitara whārangi me te whakaahuatanga kōwhiringa.
.list	Tīwae whakatere kōwhiringa i roto i te ihirangi.
.main	Tīwae ihirangi matua i roto i te ihirangi.
.panel	Rohe panui āwhina e tuwhera ana i te taha matau o te whārangi.
.tabs	Taritaka whakatere kōwhiringa i te tīmatanga o te rārangi ihirangi.
.title	Taitara whārangi i raro i te rārangi o runga.
.top	Rārangi grid e whai pātene huarahi (breadcrumbs) me ngā taputapu āwhina.
.trailing	Tīwae āpiti kōwhiringa i roto i te ihirangi.
.utilities	Ngā mahi āwhina i te mutunga o te rārangi o runga.

Ngā āhuatanga

Tūnga	Whakamārama
:optional	—

Ngā tohu i whakamahia

Token	Momo	Uara
--instui-background-color-page	—	—

Ngā wāhanga-iti

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

Hono

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