CSS: page-layout ​

div[class~="instui-page-layout"] — 標準三欄頁面佈局，包含頁首、側邊欄與主要內容。

✅ 何時使用 Page-Layout：

  • 需要具有導覽與內容區域的經典頁面結構

  • 頁面有明確的主要內容區，兩側為互補區域

  • 想在整體佈局中維持一致的間距與對齊 🚫 何時不使用 Page-Layout：

  • 正在建置單欄頁面 — 改用更簡單的佈局

  • 側邊欄與主要內容在重要性上互相競爭

無障礙 ​

  • 將主要內容區對應為 <main> 標誌區
  • 視情況為側邊欄指定 role="navigation" 或 role="complementary"
  • 確保各標誌區有明確且不同的 aria-label

使用方法 ​

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

部件 ​

部件說明
.instui-body包含側邊欄與內容的主要主體。
.instui-footer底部頁腳區域。
.instui-header頂部標頭區域。
.instui-main中央內容區域。
.instui-sidebar左側導覽或輔助欄。

狀態 ​

狀態說明
:optional—

已使用的代幣 ​

Token型別值
--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——

相關 ​