CSS: page-layout

div[class~="instui-page-layout"] — Susun atur halaman tiga lajur standard dengan pengepala, bar sisi, dan kandungan utama.

✅ Gunakan Page-Layout apabila:

• Anda memerlukan struktur halaman klasik dengan navigasi dan kawasan kandungan

• Halaman mempunyai kawasan kandungan utama yang jelas diapit oleh kawasan pelengkap

• Anda mahukan jarak dan penjajaran konsisten di seluruh susun atur 🚫 Jangan gunakan Page-Layout apabila:

• Membangun halaman satu lajur — gunakan susun atur yang lebih ringkas sebagai gantinya

• Bar sisi bersaing dengan kandungan utama dari segi kepentingan

Aksesibiliti

• Peta kawasan kandungan utama ke penanda <main>
• Berikan bar sisi role="navigation" atau role="complementary" mengikut kesesuaian
• Pastikan kawasan penanda mempunyai aria-label yang berbeza

Penggunaan

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

Contoh

Bahagian

Bahagian	Penerangan
.instui-body	Badan utama yang mengandungi bar sisi dan kandungan.
.instui-footer	Kawasan footer bawah.
.instui-header	Kawasan pengepala atas.
.instui-main	Kawasan kandungan tengah.
.instui-sidebar	Navigasi kiri atau lajur tambahan.

Keadaan

Keadaan	Penerangan
:optional	—

Token digunakan

Token	Jenis	Nilai
--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	—	—

Berkaitan

• wrapper