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——

相关 ​