CSS: page-layout

div[class~="instui-page-layout"] — Szabványos háromoszlopos oldalelrendezés fejléccel, oldalsávval és a fő tartalommal.

✅ Használja a Page-Layout-ot, amikor:

• Szükséged van egy klasszikus oldalszerkezetre, amely tartalmaz navigációs és tartalmi területeket

• Az oldalnak világos fő tartalomterülete van, amelyet kiegészítő részek öveznek

• Egységes térközítést és igazítást szeretnél az elrendezésben 🚫 Ne használd a Page-Layoutot, ha:

• Egyoszlopos oldal készítése — használjon ehelyett egyszerűbb elrendezést

• Az oldalsáv verseng a fő tartalommal a fontosságért

Hozzáférhetőség

• Térképezze le a fő tartalmi területet egy <main> landmarkra
• Az oldalsávhoz adjon role="navigation" vagy role="complementary" attribútumot, ahogy megfelelő
• Biztosítsa, hogy a landmark régióknak különböző aria-label értékeik legyenek

Használat

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

Példák

Részek

Rész	Leírás
.instui-body	Fő rész, amely az oldalsávot és a tartalmat tartalmazza.
.instui-footer	Alsó lábléc terület.
.instui-header	Felső fejléc területe.
.instui-main	Központi tartalomterület.
.instui-sidebar	Bal oldali navigációs vagy segédoszlop.

Állapotok

Állapot	Leírás
:optional	—

Fogyasztott tokenek

Token	Típus	Érték
--instui-color-border	—	—
--instui-color-footer-background	—	—
--instui-color-footer-text	—	—
--instui-color-header-background	—	—
--instui-color-sidebar-background	—	—
--instui-font-size-small	<length>	—
--instui-space-medium	—	—

Kapcsolódó

• wrapper