CSS: page-layout

div[class~="instui-page-layout"] — Bố cục trang chuẩn ba cột với đầu trang, thanh bên, và nội dung chính.

✅ Sử dụng Page-Layout khi:

• Bạn cần cấu trúc trang cổ điển với vùng điều hướng và vùng nội dung

• Trang có một vùng nội dung chính rõ ràng được kẹp giữa các vùng bổ trợ

• Bạn muốn khoảng cách và căn chỉnh đồng nhất trong toàn bố cục 🚫 Không sử dụng Page-Layout khi:

• Xây dựng trang một cột — hãy dùng bố cục đơn giản hơn

• Thanh bên tranh chấp tầm quan trọng với nội dung chính

Khả năng truy cập

• Ánh xạ vùng nội dung chính tới một mốc <main>
• Gán cho thanh bên role="navigation" hoặc role="complementary" khi thích hợp
• Đảm bảo các vùng mốc có aria-label riêng biệt

Sử dụng

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

Các ví dụ

Phần

Phần	Mô tả
.instui-body	Thân chính chứa thanh bên và nội dung.
.instui-footer	Vùng chân trang phía dưới.
.instui-header	Vùng đầu trang phía trên.
.instui-main	Vùng nội dung trung tâm.
.instui-sidebar	Cột điều hướng bên trái hoặc cột phụ trợ.

Trạng thái

Trạng thái	Mô tả
:optional	—

Token tiêu thụ

Token	Kiểu	Giá trị
--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	—	—

Liên quan

• wrapper