Layout

A classic page skeleton of header + sider + content + footer, used with semantic child components.

Basic usage

Sider + header + content + footer

Header areaSider

Main content area; place any content here.

flex 1Footer info

Example

Without sider

Header + content + footer

Header areaA layout with only the header and footer.Footer info

Example

Collapsible sider

Collapsible sider (collapsed)

Toggle sider collapseHeader areaSiderClick the button above to collapse / expand the sider.Footer info

Example

API

Component	Description
oas-layout	Layout container (lays out horizontally when a sider is present)
oas-header	Top bar, renders as <header>
oas-sider	Sider; the collapsed attribute collapses it to a narrow bar; renders as <aside aria-label="侧边栏">
oas-content	Content area, renders as <main>
oas-footer	Footer, renders as <footer>

Child components must carry the matching slot attribute (header / sider / content / footer).