页面布局 / COMPONENT ATLAS
前台布局FrontendLayout
前台整体布局组件，通过统一的 FrontendShell 组织粘性吸顶 Header、弹性正文内容区与 Footer，并在路由加载过程中通过 SuspenseBoundary 展示匹配的骨架屏。图鉴提供完整页面、移动端窄屏与骨架屏等多种模式演示。
亲手试一试。
01 / LIVE PREVIEWLAYOUT
WIDTH
FRONTEND LAYOUT SPECIMEN
一页内容，安心阅读
前台布局通过统一的 FrontendShell 组合顶部 Header、弹性内容主区 main 与底部 Footer。当前选中栏目：首页。
精选文章•2026-09-28•5 分钟阅读
Dioxus 0.7 与全栈 Rust 博客布局演进
探讨全栈 Rust 前端在 SSR、水合、骨架屏与页面过渡动画上的工程实践，兼顾极致的加载性能与阅读体验。
设计系统•2026-09-15
统一宽度与响应式对齐的排版艺术
导航栏 max-w 与正文容器严格对齐，保证视口放大缩小时视觉焦点稳定不飘移。
— 滚动至底部可点击页脚回到顶部 —
STATES / 示例状态
导航示例正文页脚骨架屏
本地演示，内容不会保存。INTERACTIVE SPECIMEN · 跟随全站主题
用法
02 / USAGE下方展示组件的调用方式。
#[layout(FrontendLayout)]
#[route("/")]
Home {}, // 前台路由共享 Header、主内容区与 Footer主要属性
03 / PROPERTIES| 属性 / 类型 | 默认值 | 说明 |
|---|---|---|
—无 | — | FrontendLayout 为全局路由布局外壳，不接收外部显式参数，内部自动绑定当前路由与骨架屏。 |
FrontendShell · headerElement | 必填 | 顶部导航栏插槽，通常挂载 Header 组件。 |
FrontendShell · main_contentElement | 必填 | 正文内容插槽，在 SuspenseBoundary 中渲染路由 Outlet 或骨架屏。 |
FrontendShell · footerElement | 必填 | 页面底部插槽，通常挂载 Footer 组件。 |
FrontendShell · max_width&'static str | max-w-4xl | 正文容器最大宽度类，与 Header 的 max_width 保持严格对齐。 |
FrontendShell · min_height&'static str | min-h-screen | 容器最小高度，保证页面内容较少时页脚依然贴底。 |