layout布局_[Angular 组件库 NG-ZORRO 基础入门] Day 03 - 玩转布局与菜单

前言回顾

本章内容这是我们在项目实战前比较重要的一个部分，完成该部分菜单布局开发后，我们就具备了一个项目基础的布局框架：页面布局、菜单导航、内容页、基础路由配置。
在下述 布局示意图 (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 中。

看上去好像有好多个区块组件ÿ