前言回顾
本章内容这是我们在项目实战前比较重要的一个部分,完成该部分菜单布局开发后,我们就具备了一个项目基础的布局框架:页面布局、菜单导航、内容页、基础路由配置。
在下述 布局示意图 (stackblitz demo) 中,我们看到其中涉及到了几个组件:布局(Layout)和 菜单(Menu)。
布局设计
Layout
作为一个组件库,Layout 布局组件是绝对不会少的,我们一起先来看看 NG-ZORRO 的 Layout 组件,首先看一下上面提到的布局最简单的 Layout 组件代码。
<nz-layout>
<nz-sider>Sider</nz-sider>
<nz-layout>
<nz-header>Header</nz-header>
<nz-content>Content</nz-content>
<nz-footer>Footer</nz-footer>
</nz-layout>
</nz-layout>
通过 组件概述 得知 (注意:采用 flex 布局实现,请注意浏览器兼容性问题。)
nz-layout
:布局容器,其下可嵌套nz-header
nz-sider
nz-content
nz-footer
或nz-layout
本身,可以放在任何父容器中。nz-header
:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在nz-layout
中。nz-sider
:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在nz-layout
中。nz-content
:内容部分,自带默认样式,其下可嵌套任何元素,只能放在nz-layout
中。nz-footer
:底部布局,自带默认样式,其下可嵌套任何元素,只能放在nz-layout
中。
看上去好像有好多个区块组件ÿ