CSS: page-layout

div[class~="instui-page-layout"] — Standardna postavitev strani s tremi stolpci z glavo, stranskim stolpcem in glavno vsebino.

✅ Uporabite Page-Layout, kadar:

• Potrebujete klasično strukturo strani z navigacijo in območji vsebine

• Stran ima jasno glavno vsebinsko območje, obkroženo s komplementarnimi regijami

• Želite dosledne razmike in poravnavo po celotni postavitvi 🚫 Ne uporabljajte Page-Layout, kadar:

• Gradite stran z enim stolpcem — uporabite preprostejšo postavitev

• Stranski stolpec tekmuje z glavno vsebino glede pomembnosti

Dostopnost

• Preslikajte glavno vsebinsko območje na označbo <main>
• Dajte stranskemu stolpcu role="navigation" ali role="complementary", kjer je primerno
• Poskrbite, da bodo označena območja imela različna aria-labels

Uporaba

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

Delii

Del	Opis
.instui-body	Glavno telo, ki vsebuje stranski stolpec in vsebino.
.instui-footer	Spodnje območje noge (footer).
.instui-header	Zgornje območje glave.
.instui-main	Osrednje vsebinsko območje.
.instui-sidebar	Levi navigacijski ali pomožni stolpec.

Stanja

Stanje	Opis
:optional	—

Porabljeni žetoni

Token	Tip	Vrednost
--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	—	—

Sorodno

• wrapper