布局

页面整体布局是一个产品最外层的框架结构,往往会包含导航、页脚、侧边栏、通知栏以及内容等。在页面之中,也有很多区块的布局结构。在真实项目中,页面布局通常统领整个应用的界面,有非常重要的作用。

Ant Design Pro 的布局

在 Ant Design Pro 中,我们抽离了使用过程中的通用布局,都放在 layouts 目录中,分别为:

  • BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏:
    区块 - 图1

  • UserLayout:抽离出用于登陆注册页面的通用布局

  • BlankLayout:空白的布局
    区块 - 图2

如何使用 Ant Design Pro 布局

通常布局是和路由系统紧密结合的,Ant Design Pro 的路由使用了 Umi 的路由方案,为了统一方便的管理路由和页面的关系,我们将配置信息统一抽离到 config/router.config.js 下,通过如下配置定义每个页面的布局:

  1. module.exports = [
  2. {
  3. path: '/',
  4. component: '../layouts/BasicLayout', // 指定以下页面的布局
  5. routes: [
  6. // dashboard
  7. { path: '/', redirect: '/dashboard/analysis' },
  8. {
  9. path: '/dashboard',
  10. name: 'dashboard',
  11. icon: 'dashboard',
  12. routes: [
  13. { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
  14. { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
  15. { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
  16. ],
  17. },
  18. ],
  19. },
  20. ];

映射路由和页面布局(组件)的关系如代码所示,完整映射转换实现可以参看 router.config.js

更多 Umi 的路由配置方式可以参考:Umi 配置式路由

Pro 扩展配置

我们在 router.config.js 扩展了一些关于 pro 全局菜单的配置。

  1. {
  2. name: 'dashboard',
  3. icon: 'dashboard',
  4. hideInMenu: true,
  5. hideChildrenInMenu: true,
  6. hideInBreadcrumb: true,
  7. authority: ['admin'],
  8. }
  • name: 当前路由在菜单和面包屑中的名称,注意这里是国际化配置的 key,具体展示菜单名可以在 /src/locales/zh-CN.js 进行配置。
  • icon: 当前路由在菜单下的图标名。
  • hideInMenu: 当前路由在菜单中不展现,默认 false
  • hideChildrenInMenu: 当前路由的子级在菜单中不展现,默认 false
  • hideInBreadcrumb: 当前路由在面包屑中不展现,默认 false
  • authority: 允许展示的权限,不设则都可见,详见:权限管理

Ant Design 布局组件

除了 Pro 里的内建布局以外,在一些页面中需要进行布局,可以使用 Ant Design 目前提供的两套布局组件工具:LayoutGrid

Grid 组件

栅格布局是网页中最常用的布局,其特点就是按照一定比例划分页面,能够随着屏幕的变化依旧保持比例,从而具有弹性布局的特点。

而 Ant Design 的栅格组件提供的功能更为强大,能够设置间距、具有支持响应式的比例设置,以及支持 flex 模式,基本上涵盖了大部分的布局场景,详情参看:Grid

Layout 组件

如果你需要辅助页面框架级别的布局设计,那么 Layout 则是你最佳的选择,它抽象了大部分框架布局结构,使得只需要填空就可以开发规范专业的页面整体布局,详情参看:Layout

根据不同场景区分抽离布局组件

在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通用的导航、侧边栏、顶部通知、页面标题等元素。例如 Ant Design Pro 的 BasicLayout

通常,我们会把抽象出来的布局组件,放到跟 pagescomponents 平行的 layouts 文件夹中方便管理。需要注意的是,这些布局组件和我们平时使用的其它组件并没有什么不同,只不过功能性上是为了处理布局问题。

除了 Ant Design 官方提供的布局组件,也可以试试 社区精选 里推荐的布局组件。