CSS: page-layout

div[class~="instui-page-layout"] — Layout paj estanda twa kolòn ak tèt, ba kote, ak kontni prensipal.

✅ Itilize Page-Layout lè:

• Ou bezwen yon estrikti paj klasik ak navigasyon ak zòn kontni

• Paj la gen yon zòn kontni prensipal ki klè ak zòn konplemantè sou kote

• Ou vle espasman ak aliman ki konsistan atravè layout la 🚫 Pa itilize Page-Layout lè:

• W ap konstwi yon paj yon sèl kolòn — itilize yon layout pi senp pito

• Ba kote a konpetisyon ak kontni prensipal la pou enpòtans

Aksè

• Map zòn kontni prensipal la nan yon pwen referans <main>
• Bay ba kote a role="navigation" oswa role="complementary" jan sa apwopriye
• Asire zòn referans yo gen aria-label ki diferan

Itilizasyon

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

Pati

Pati	Deskripsyon
.instui-body	Kò prensipal ki gen ladan ba kote ak kontni.
.instui-footer	Zòn pye paj anba a.
.instui-header	Zòn tèt anwo a.
.instui-main	Zòn kontni santral.
.instui-sidebar	Kolòn navigasyon oswa kolòn oksilyè sou gòch.

Eta

Eta	Deskripsyon
:optional	—

Tokens konsome

Token	Tip	Valè
--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	—	—

Ki gen rapò

• wrapper