Angular 4入门教程系列：17：NG-ZORRO：Layout

这篇文章介绍一下如何使用NG-ZORRO的layout相关的组件。

layout

概述

组件 说明 限制 [nz-layout] nz-layout布局容器 其下可嵌套 nz-header nz-sider nz-content nz-footer或 nz-layout本身，可以放在任何父容器中。 [nz-header] nz-header顶部布局 自带默认样式，其下可嵌套任何元素，只能放在 nz-layout中。 [nz-sider] nz-sider侧边栏 自带默认样式及基本功能，其下可嵌套任何元素，只能放在 nz-layout中。 [nz-content] nz-content内容部分 自带默认样式，其下可嵌套任何元素，只能放在 nz-layout中。 [nz-footter] nz-footer底部布局 自带默认样式，其下可嵌套任何元素，只能放在 nz-layout中。

nz-sider

参数 说明 类型 默认值 nzCollapsible 是否可收起，当添加该属性时变为可收起 attribute - nzCollapsed 当前收起状态，可双向绑定 Boolean - nzCollapseChange 展开-收起时的回调函数 Func - nzTrigger 自定义 trigger，设置为 null 时隐藏 trigger - nzWidth 宽度 Number 200 nzCollapsedWidth 收 缩宽度，设置为 0 会出现特殊 trigger Number 64 nzBreakpoint 触发响应式布局的断点 ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’ -

例子

CSS

[root@mail app]# cat app.component.css .nz-sample {  font-size:30px;}[root@mail app]# 

HTML

[root@mail app]# cat app.component.html <h1> Layout 1 </h1><nz-layout>  <nz-header  style="text-align:center"><div class="nz-sample"> header</div> </nz-header>  <nz-content style="text-align:center"><div class="nz-sample"> content</div> </nz-content>  <nz-footer  style="text-align:center"><div class="nz-sample"> footer</div> </nz-footer></nz-layout><h1> Layout 2 </h1><nz-layout>  <nz-header  style="text-align:center"><div class="nz-sample"> header</div> </nz-header>  <nz-layout>    <nz-sider   style="background:#CFCFCF;text-align:center"><div class="nz-sample"> sider </div> </nz-sider>    <nz-content style="text-align:center"><div class="nz-sample"> content</div> </nz-content>  </nz-layout>  <nz-footer  style="text-align:center"><div class="nz-sample"> footer</div> </nz-footer></nz-layout><h1> Layout 3 </h1><nz-layout>  <nz-header  style="text-align:center"><div class="nz-sample"> header</div> </nz-header>  <nz-layout>    <nz-content style="text-align:center"><div class="nz-sample"> content</div> </nz-content>    <nz-sider   style="background:#CFCFCF;text-align:center"><div class="nz-sample"> sider </div> </nz-sider>  </nz-layout>  <nz-footer  style="text-align:center"><div class="nz-sample"> footer</div> </nz-footer></nz-layout><h1> Layout 4 </h1><nz-layout>  <nz-sider   style="background:#CFCFCF;text-align:center"><div class="nz-sample"> sider </div> </nz-sider>  <nz-layout>    <nz-header  style="text-align:center"><div class="nz-sample"> header</div> </nz-header>    <nz-content style="text-align:center"><div class="nz-sample"> content</div> </nz-content>    <nz-footer  style="text-align:center"><div class="nz-sample"> footer</div> </nz-footer>  </nz-layout></nz-layout>[root@mail app]#

结果确认