Layout 布局

经典的顶部 + 侧栏 + 内容 + 底部页面骨架，配合语义化子组件使用。

基础用法

侧栏 + 头部 + 内容 + 底部

头部区域侧边栏

主要内容区，可放置任意内容。

flex 1底部信息

示例代码

无侧栏

头部 + 内容 + 底部

头部区域仅含头部与底部的内容布局。底部信息

示例代码

侧栏位置切换

side：left / right / top

左侧右侧顶部

菜单

内容区：菜单位置可在 左 / 右 / 顶 之间切换（顶部建议复用 oas-menubar / oas-navigation-menu）。

示例代码

side 属性（left 默认 / right / top）控制侧栏槽内容落位：默认左列、right 右列、top 顶部横向铺满——顶部菜单可复用现有水平导航（oas-menubar / oas-navigation-menu / oas-toolbar），布局只负责排出位置。

可折叠侧栏

折叠侧栏 collapsed

切换侧栏折叠头部区域侧边栏点击上方按钮折叠 / 展开侧栏。底部信息

示例代码

职责边界：sider 的折叠触发器（折叠按钮、菜单折叠操作）归 oas-sidebar 负责——oas-sidebar 自带 collapsible 折叠能力并派发折叠事件，oas-sider 监听后同步自身 collapsed 窄条；oas-layout 只负责骨架排布（槽位、主轴方向、视口锁定），不重复实现折叠触发逻辑。

侧栏宽度（width）

oas-sider 的 width 属性显式指定轨道宽度（纯数字按 px，支持长度/百分比），缺省走 --oas-sider-width token（默认 200px）；折叠时仍按窄条契约（--oas-sider-collapsed-width，默认 64px）收窄——显式宽度与折叠契约互斥共存，解除折叠后恢复显式宽度。

width 显式轨道宽度

width=280 侧栏内容区：轨道宽度由 width 属性显式指定为 280px（缺省为 --oas-sider-width 的 200px）。折叠中折叠时窄条契约优先（--oas-sider-collapsed-width，64px），width 让位；解除折叠恢复 280px。

示例代码

视口锁定布局

viewport：admin 后台模式——布局锁定视口高，顶栏/底栏固定，侧栏与内容各自独立滚动（页面整体不出滚动条）。默认不带此属性时是整页滚动模型（内容多高页面多高）。

高度默认 100dvh（移动端地址栏友好，不支持时级联回退 100vh），可用 --oas-layout-height 改为 100% / calc(...) 等（下面 demo 为便于展示锁定为 320px）。

视口锁定（viewport）+ 内嵌侧栏

顶栏固定（不随内容滚动）

内容区独立滚动——向下滚动长内容，注意左侧侧栏与顶部顶栏保持不动。

段落 1：视口锁定模式下，侧栏与内容各自在本区内滚动。

段落 2：页面（body）不产生滚动条。

段落 3：内嵌侧栏自动填满轨道宽度（sider 管宽、sidebar 跟随）。

段落 4：滚动到这里时，顶栏仍然可见。

段落 5：继续向下……

段落 6：内容再长也只滚内容区。

段落 7：侧栏菜单超出视口时，在侧栏内独立滚动。

段落 8：适合后台管理系统的主框架布局。

段落 9：顶栏固定 + 双区独立滚动的经典组合。

段落 10：到 demo 底部了。

底部固定

示例代码

内嵌宽度契约：oas-sider 管轨道宽度（--oas-sider-width，默认 200px，折叠 64px），内嵌的 oas-sidebar 自动填满轨道（不再用自身默认 220px，轨道 padding 同时卸除）；oas-sidebar 独立使用时仍走 --oas-sidebar-width（默认 220px）。两个变量职责：sider 管轨道、sidebar 管独立，改任一侧都不会错位。

对照说明：固定头部 / 固定侧栏（fixed 定位）是经典后台布局场景——viewport 视口锁定模式即为此而设：顶栏/底栏天然固定、侧栏与内容各自独立滚动，等价覆盖该类需求而无需手动套 fixed 定位，语义更现代。

API

组件	说明
oas-layout	布局容器（含侧栏时自动横向排布）
oas-header	顶栏，渲染为 <header>
oas-sider	侧栏，collapsed 属性折叠为窄条，渲染为 <aside aria-label="侧边栏">
oas-content	内容区，渲染为 <main>
oas-footer	底部，渲染为 <footer>

子组件需带对应 slot 属性（header / sider / content / footer）。

oas-layout

属性

属性	说明	类型	默认值
side	侧栏位置：left（默认）/ right / top；非法值回落 left；top 时侧栏槽占满整行宽（可复用水平导航组件）	string	left
viewport	视口锁定模式：布局锁定视口高（默认 100dvh，不支持级联回退 100vh；--oas-layout-height 可改 100%/calc()），顶栏/底栏固定，侧栏与内容各自独立滚动；默认为整页滚动模型	boolean	—

插槽

名称	说明
content	主内容区
footer	底部区
header	顶部区
sider	侧边区

CSS 变量

CSS 变量	默认值
--oas-layout-height	100dvh

oas-header

插槽

名称	说明
默认	顶部内容

oas-sider

属性

属性	说明	类型	默认值
collapsed	折叠为窄条（存在即折叠）	boolean	—
width	轨道宽度显式覆盖（纯数字按 px；折叠时窄条契约优先，缺省走 --oas-sider-width）	string	—

插槽

名称	说明
默认	侧边内容

CSS 变量

CSS 变量	默认值
--oas-sider-collapsed-width	64px
--oas-sider-width	200px

oas-content

插槽

名称	说明
默认	内容区

oas-footer

插槽

名称	说明
默认	底部内容