Ant Design 上中下布局Header-Content-Footer实战指南从官方示例到源码实现【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design本篇技术指南以 Ant Design 官方「上中下布局」top layout即最基础的Header-Content-Footer三段式布局为对象讲解其在当前仓库中的标准写法、适用场景与设计规则并深入Layout组件的源码实现与样式 Token 体系帮助你理解这类经典顶部导航布局的原理掌握在实际项目中快速落地与按需定制的能力。读完你将能够直接复用官方示例搭建完整页面骨架、理解Layout/Header/Content/Footer的组件关系与默认尺寸来源并能结合Sider等变体判断何种信息结构适合顶部导航。什么是「上-中-下」布局「上-中-下」布局官方英文名为header-content-footer layout是 Ant Design 中最基本、也最经典的一种页面级布局形态页面在纵向上被切分为顶部导航区Header、主内容区Content、底部页脚区Footer三部分。相关定义与设计说明收录于 components/layout/demo/top.md配套可运行示例位于 components/layout/demo/top.tsx。导航区的基本构成按照官方文档描述这种布局将主导航放置于页面顶端从左自右依次为logo品牌标识一级导航项水平排列的菜单辅助菜单用户、设置、通知等。固定宽度内容的稳定性文档强调通常将内容放在固定尺寸例如 1200px的容器内这样整个页面的排版保持稳定不会受用户终端显示器尺寸差异的影响。这一点与下方源码剖析中 Header/Content 采用 flex 自适应、同时通过内边距约束内容区宽度的实现方式相辅相成——固定的内容宽度带来的是跨终端一致的阅读体验。优缺点与适用边界维度说明符合浏览习惯上下级结构符合用户自上而下的浏览习惯是较为经典的网站导航模式信息展示效率页面上下切分的方式提高了主工作区域的信息展示效率纵向空间代价页面在纵向空间上会有一些牺牲顶部与页脚占用高度横向空间限制由于导航栏水平空间有限不适合一级导航项很多的信息结构也就是说如果你的业务有大量平级的一级导航例如十几个顶级栏目顶部导航会出现横向拥挤甚至溢出此时应优先考虑侧边导航参考 侧边布局示例。完整示例代码与逐段讲解官方示例 components/layout/demo/top.tsx 是理解该布局的最小完整实现完整代码如下import React from react; import { Breadcrumb, Layout, Menu, theme } from antd; const { Header, Content, Footer } Layout; const items new Array(15).fill(null).map((_, index) ({ key: index 1, label: nav ${index 1}, })); const App: React.FC () { const { token: { colorBgContainer, borderRadiusLG }, } theme.useToken(); return ( Layout Header style{{ display: flex, alignItems: center }} div classNamedemo-logo / Menu themedark modehorizontal defaultSelectedKeys{[2]} items{items} style{{ flex: 1, minWidth: 0 }} / /Header Content style{{ padding: 0 48px }} Breadcrumb style{{ margin: 16px 0 }} Breadcrumb.ItemHome/Breadcrumb.Item Breadcrumb.ItemList/Breadcrumb.Item Breadcrumb.ItemApp/Breadcrumb.Item /Breadcrumb div style{{ background: colorBgContainer, minHeight: 280, padding: 24, borderRadius: borderRadiusLG, }} Content /div /Content Footer style{{ textAlign: center }} Ant Design ©{new Date().getFullYear()} Created by Ant UED /Footer /Layout ); }; export default App;Header 区logo 与水平菜单的弹性布局Header内部通过display: flex与alignItems: center将 logo.demo-logo占位元素与Menu水平排布Menu设置flex: 1, minWidth: 0使其占据剩余全部宽度——minWidth: 0是关键细节它允许菜单在空间不足时收缩而不会被内容撑破。菜单使用modehorizontal呈水平条状themedark与深色 Header 背景融合defaultSelectedKeys{[2]}指定默认高亮项。Content 区面包屑 主题 Token 内容卡片Content使用padding: 0 48px在左右留白内部依次为Breadcrumb面包屑导航margin: 16px 0提供纵向间距用于展示Home / List / App的层级路径内容卡片借助theme.useToken()取出的colorBgContainer作为卡片背景色、borderRadiusLG作为圆角配合minHeight: 280、padding: 24形成一块可见的主工作区容器。通过 Design Token 取色而非硬编码颜色可以保证卡片随全局主题明/暗自动适配。Footer 区居中页脚Footer通过textAlign: center居中显示版权信息new Date().getFullYear()动态输出当前年份。组件结构与源码实现剖析上中下布局的底层由Layout复合组件支撑。入口文件 components/layout/index.tsx 将Layout与其子组件Header、Footer、Content、Sider挂载为复合组件Layout.Header Header; Layout.Footer Footer; Layout.Content Content; Layout.Sider Sider;generator 工厂一个函数生成四种布局容器在核心实现 components/layout/layout.tsx 中Header、Footer、Content与Layout本体全部由同一个generator工厂函数生成layout.tsx#L133-L154组件suffixCls渲染的语义化标签displayNameLayout-divLayoutHeaderheaderheaderHeaderFooterfooterfooterFooterContentcontentmainContentgenerator内部通过React.forwardRef将suffixCls与tagName透传给Basic组件layout.tsx#L38-L66最终渲染为带ant-layout-header、ant-layout-content、ant-layout-footer类名的语义化 HTML 标签这对 SEO 与无障碍可访问性都是加分项。BasicLayoutflex 容器与 Sider 检测Layout本体由BasicLayout实现layout.tsx#L68-L131关键机制包括通过LayoutContext.Provider向子级提供siderHook供Sider注册/注销自身addSider/removeSider通过useHasSider自动检测子元素中是否存在Sider若存在则为容器追加ant-layout-has-sider类名从而让 flex 主轴方向从纵向column切换为横向row。上中下布局由于不包含Sider天然保持纵向排列。测试用例 components/layout/tests/index.test.tsx 中的detect the sider as children用例正是对该机制的回归验证渲染LayoutSider…/SiderContent…/Content/Layout后断言.ant-layout包含ant-layout-has-sider类名。样式实现flex 布局与默认尺寸样式源码 components/layout/style/index.ts 展示了布局的核心 CSS 逻辑index.ts#L125-L149Layout容器display: flex; flex: auto; flexDirection: column;即默认纵向堆叠Header与Footerflex: 0 0 auto即高度不随内容伸缩Contentflex: auto自动吸收剩余纵向空间撑满整个主工作区全局box-sizing: border-box避免内边距撑破尺寸。设计规则尺寸规范与 Design Token 印证上中下布局的尺寸并非随意设定。官方文档 components/layout/index.zh-CN.md 的设计规则章节给出了明确的数值体系尺寸规范顶部导航大部分系统一级导航高度64px二级导航48px顶部导航展示类页面一级导航高度80px二级导航56px顶部导航高度的取值范围计算公式48 8n侧边导航宽度的取值范围计算公式200 8n。源码印证Header 默认高度 64px这些规范在源码中有直接对应。prepareComponentTokenstyle/index.ts#L283-L320中headerHeight: controlHeight * 2, // controlHeight 默认 32 → 64px headerPadding: 0 ${paddingInline}px, // paddingInline controlHeightLG * 1.25 → 默认 50px footerPadding: ${controlHeightSM}px ${paddingInline}px,即Header默认高度等于全局controlHeight默认32px的两倍——64px与设计规则中「大部分系统一级导航高度 64px」完全吻合默认水平内边距为controlHeightLG × 1.25默认50px。此外headerBg: #001529、siderBg: #001529是官方深色导航的基准色。Header样式还包含一处与Menu的协同细节style/index.ts#L257-L261[${antCls}-menu]: { lineHeight: inherit, },它让 Header 内水平菜单的行高继承 Header 高度从而菜单项与导航条视觉上等高对齐这正是上中下布局中 HeaderMenu 组合看起来浑然一体的原因。交互与视觉要点按官方文档顶部导航还应注意一级导航和末级导航需要在可视化层面被强调出来当前项在呈现上优先级最高视觉强调手段按力度从强到弱依次为大色块强调适用于深色底色的父级导航项、高亮火柴棍适用于浅色底、导航路径最终项、字体高亮变色通常用于当前项的上一级、字体放大12px、14px为标准字号14 号用于一、二级导航。布局变体对比何时用上中下何时用侧边官方代码演示集中提供了多种布局形态见 components/layout/index.zh-CN.md 的「代码演示」列表上中下布局与它们的取舍关系如下布局形态示例适用场景上中下布局top.tsx一级导航项较少、偏内容展示型或系统型页面顶部-侧边布局top-side.tsx顶部放一级导航侧边放二级/详情导航兼顾两层信息顶部-侧边布局通栏top-side-2.tsx内容横向铺满、侧边栏由内容区包裹的变体侧边布局side.tsx一级导航项多、信息层级深的后台管理系统例如 top-side.tsx 中Header内是横向一级菜单items1Content内再嵌套一个包含Sider与内层Content的Layout用于承载二级菜单items2实现了「顶部分类 侧边明细」的两级导航结构——这是对上中下布局的常见演进。小结上中下布局是 Ant Design 中「开箱即用」的经典页面骨架Layout纵向堆叠Header/Content/FooterHeader 以弹性布局容纳 logo 与水平菜单Content 通过 Design Token 呈现内容卡片Footer 承载版权信息。通过 示例代码 可快速复制落地通过 核心实现 与 样式实现 可理解其 flex 布局原理与64px等默认尺寸的来源结合 官方文档 的设计规则与变体对比即可为自己的项目选择最合适的导航结构。若你的系统一级导航数量较多、层级较深则建议改用侧边布局或顶部-侧边布局。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
