CSS: wrapper
body[class~="instui-display-flex"] — Alkalmazáshéj sora: oldalnavigáció, konténer fejléccel és opcionális panel.
✅ Használd a Wrapper-t, amikor:
Egy teljes Canvas termékoldalt építesz, amelynek konzisztens elrendezési vázra van szüksége
Az oldal a GlobalNav-ot használja elsődleges navigációs horgonyként
Az oldalnak oldalpanelekre van szüksége: ContentTabList, TrailingContentArea vagy UtilityPanel
Konzisztens konténer belső margóra (padding) és maximális tartalomszélességre van szükséged a teljes oldalon 🚫 Ne használd a Wrapper-t, amikor:
Modal, Tray vagy Drawer elemet építesz — ezek saját elrendezési konténerrel rendelkeznek
Az oldal egy részterületét csomagolod be — a Wrapper a teljes oldalt tartalmazza, nem csak egy régiót
Akadálymentesség
- Rendelje a fő tartalmi területet egy <main> tájékozódási ponthoz (landmark) egy navigációt átugró (skip-nav) hivatkozással, hogy a billentyűzetet használó felhasználók kihagyhassák a GlobalNav elemet
- Adjon a ContentTabList elemnek role="navigation" attribútumot egy egyedi aria-label címkével, mint például "Page navigation" — elkülönítve a GlobalNav tájékozódási pontjától
- Adjon a TrailingContentArea elemnek role="complementary" attribútumot egy leíró aria-label címkével, amely tükrözi a tartalmát, mint például "Student details"
- Adjon minden UtilityPanel elemnek egyedi aria-label címkét: "AI assistant", "Notifications" vagy "Filters"
- Amikor egy UtilityPanel megnyílik, vigye a fókuszt a panelbe; amikor bezárul, vigye vissza a fókuszt az azt megnyitó indítóelemre
Használat
css
@import "@pantoken/plugin-layouts/layouts.css";Felépítés
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~="instui-display-flex"]"]:::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="content"].main"):::cssdoc-part
n21(["slot[name="trailing"].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;
Slotok
| Slot | Leírás |
|---|---|
content | Elsődleges oldaltartalom. |
filters | Opcionális szűrőtartalom a fejlécben. |
header | Opcionális fejlécbővítmény (slot) az oldalleírás alatt. |
panel | Segédpanel tartalma. |
trailing | Záró kiegészítő tartalom. |
Részek
| Rész | Leírás |
|---|---|
.actions | Opcionális fejlécgombok a felső sor végén. |
.container | Fő oldaloszlop, amely a fejlécet és a tartalmat tartalmazza. |
.content | Elsődleges tartalmi régió a konténeroszlopon belül. |
.description | Opcionális oldalleírás a cím alatt. |
.filters | Opcionális szűrőrégió a fejlécben. |
.header | Fejlécrégió a konténeroszlopon belül. |
.info | Konténer az oldalcímhez és az opcionális leíráshoz. |
.list | Opcionális navigációs oszlop a tartalom belsejében. |
.main | Fő tartalmi oszlop a tartalom belsejében. |
.panel | Segédpanel régió, amely az oldal jobb oldalán nyílik meg. |
.tabs | Opcionális navigációs fülek a tartalomsor elején. |
.title | Oldalcím a felső sor alatt. |
.top | Morzsamenüt és segédeszközöket tartalmazó rácssor. |
.trailing | Opcionális kiegészítő oszlop a tartalom belsejében. |
.utilities | Segédműveletek a felső sor végén. |
Állapotok
| Állapot | Leírás |
|---|---|
:optional | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-background-color-page | — | — |