Layout布局

协助进行页面级整体布局。

  1. import { NzLayoutModule } from 'ng-zorro-antd/layout';

设计规则

尺寸

一级导航项偏左靠近 logo 放置,辅助菜单偏右放置。

  • 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px
  • 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px
  • 顶部导航高度的范围计算公式为:48+8n
  • 侧边导航宽度的范围计算公式:200+8n

交互

  • 一级导航和末级的导航需要在可视化的层面被强调出来;
  • 当前项应该在呈现上优先级最高;
  • 当导航收起的时候,当前项的样式自动赋予给它的上一个层级;
  • 左侧导航栏的收放交互同时支持手风琴和全展开的样式,根据业务的要求进行适当的选择。

视觉

导航样式上需要根据信息层级合理的选择样式:

  • 大色块强调

    建议用于底色为深色系时,当前页面父级的导航项。

  • 高亮火柴棍

    当导航栏底色为浅色系时使用,可用于当前页面对应导航项,建议尽量在导航路径的最终项使用。

  • 字体高亮变色

    从可视化层面,字体高亮的视觉强化力度低于大色块,通常在当前项的上一级使用。

  • 字体放大

    12px14px 是导航的标准字号,14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

组件概述

  • nz-layout:布局容器,其下可嵌套 nz-header``nz-sider``nz-content``nz-footernz-layout 本身,可以放在任何父容器中。
  • nz-header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 nz-layout 中。
  • nz-sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 nz-layout 中。
  • nz-content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 nz-layout 中。
  • nz-footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 nz-layout 中。

注意:采用 flex 布局实现,请注意浏览器兼容性问题。

代码演示Layout布局 - 图2

Layout布局 - 图3

基本结构

典型的页面布局。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-basic',
  4. template: `
  5. <nz-layout>
  6. <nz-header>Header</nz-header>
  7. <nz-content>Content</nz-content>
  8. <nz-footer>Footer</nz-footer>
  9. </nz-layout>
  10. <nz-layout>
  11. <nz-header>Header</nz-header>
  12. <nz-layout>
  13. <nz-sider>Sider</nz-sider>
  14. <nz-content>Content</nz-content>
  15. </nz-layout>
  16. <nz-footer>Footer</nz-footer>
  17. </nz-layout>
  18. <nz-layout>
  19. <nz-header>Header</nz-header>
  20. <nz-layout>
  21. <nz-content>Content</nz-content>
  22. <nz-sider>Sider</nz-sider>
  23. </nz-layout>
  24. <nz-footer>Footer</nz-footer>
  25. </nz-layout>
  26. <nz-layout>
  27. <nz-sider>Sider</nz-sider>
  28. <nz-layout>
  29. <nz-header>Header</nz-header>
  30. <nz-content>Content</nz-content>
  31. <nz-footer>Footer</nz-footer>
  32. </nz-layout>
  33. </nz-layout>
  34. `,
  35. styles: [
  36. `
  37. :host {
  38. text-align: center;
  39. }
  40. nz-header,
  41. nz-footer {
  42. background: #7dbcea;
  43. color: #fff;
  44. }
  45. nz-footer {
  46. line-height: 1.5;
  47. }
  48. nz-sider {
  49. background: #3ba0e9;
  50. color: #fff;
  51. line-height: 120px;
  52. }
  53. nz-content {
  54. background: rgba(16, 142, 233, 1);
  55. color: #fff;
  56. min-height: 120px;
  57. line-height: 120px;
  58. }
  59. nz-layout {
  60. margin-bottom: 48px;
  61. }
  62. nz-layout:last-child {
  63. margin: 0;
  64. }
  65. `
  66. ]
  67. })
  68. export class NzDemoLayoutBasicComponent {}

Layout布局 - 图4

上中下布局

最基本的『上-中-下』布局。

一般主导航放置于页面的顶端,从左自右依次为:logo、一级导航项、辅助菜单(用户、设置、通知等)。通常将内容放在固定尺寸(例如:1200px)内,整个页面排版稳定,不受用户终端显示器影响;上下级的结构符合用户上下浏览的习惯,也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率,但在纵向空间上会有一些牺牲。此外,由于导航栏水平空间的限制,不适合那些一级导航项很多的信息结构。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-top',
  4. template: `
  5. <nz-layout>
  6. <nz-header>
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="horizontal">
  9. <li nz-menu-item>nav 1</li>
  10. <li nz-menu-item>nav 2</li>
  11. <li nz-menu-item>nav 3</li>
  12. </ul>
  13. </nz-header>
  14. <nz-content>
  15. <nz-breadcrumb>
  16. <nz-breadcrumb-item>Home</nz-breadcrumb-item>
  17. <nz-breadcrumb-item>List</nz-breadcrumb-item>
  18. <nz-breadcrumb-item>App</nz-breadcrumb-item>
  19. </nz-breadcrumb>
  20. <div class="inner-content">Content</div>
  21. </nz-content>
  22. <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  23. </nz-layout>
  24. `,
  25. styles: [
  26. `
  27. .logo {
  28. width: 120px;
  29. height: 31px;
  30. background: rgba(255, 255, 255, 0.2);
  31. margin: 16px 24px 16px 0;
  32. float: left;
  33. }
  34. [nz-menu] {
  35. line-height: 64px;
  36. }
  37. nz-breadcrumb {
  38. margin: 16px 0;
  39. }
  40. nz-content {
  41. padding: 0 50px;
  42. }
  43. nz-footer {
  44. text-align: center;
  45. }
  46. .inner-content {
  47. background: #fff;
  48. padding: 24px;
  49. min-height: 280px;
  50. }
  51. `
  52. ]
  53. })
  54. export class NzDemoLayoutTopComponent {}

Layout布局 - 图5

顶部-侧边布局-通栏

同样拥有顶部导航及侧边栏,区别是两边未留边距,多用于应用型的网站。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-top-side-2',
  4. template: `
  5. <nz-layout>
  6. <nz-header>
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
  9. <li nz-menu-item nzSelected>nav 1</li>
  10. <li nz-menu-item>nav 2</li>
  11. <li nz-menu-item>nav 3</li>
  12. </ul>
  13. </nz-header>
  14. <nz-layout>
  15. <nz-sider nzWidth="200px" nzTheme="light">
  16. <ul nz-menu nzMode="inline" class="sider-menu">
  17. <li nz-submenu nzOpen nzIcon="user" nzTitle="subnav 1">
  18. <ul>
  19. <li nz-menu-item nzSelected>option1</li>
  20. <li nz-menu-item>option2</li>
  21. <li nz-menu-item>option3</li>
  22. <li nz-menu-item>option4</li>
  23. </ul>
  24. </li>
  25. <li nz-submenu nzTitle="subnav 2" nzIcon="laptop">
  26. <ul>
  27. <li nz-menu-item>option5</li>
  28. <li nz-menu-item>option6</li>
  29. <li nz-menu-item>option7</li>
  30. <li nz-menu-item>option8</li>
  31. </ul>
  32. </li>
  33. <li nz-submenu nzTitle="subnav 3" nzIcon="notification">
  34. <ul>
  35. <li nz-menu-item>option9</li>
  36. <li nz-menu-item>option10</li>
  37. <li nz-menu-item>option11</li>
  38. <li nz-menu-item>option12</li>
  39. </ul>
  40. </li>
  41. </ul>
  42. </nz-sider>
  43. <nz-layout class="inner-layout">
  44. <nz-breadcrumb>
  45. <nz-breadcrumb-item>Home</nz-breadcrumb-item>
  46. <nz-breadcrumb-item>List</nz-breadcrumb-item>
  47. <nz-breadcrumb-item>App</nz-breadcrumb-item>
  48. </nz-breadcrumb>
  49. <nz-content>Content</nz-content>
  50. </nz-layout>
  51. </nz-layout>
  52. </nz-layout>
  53. `,
  54. styles: [
  55. `
  56. .logo {
  57. width: 120px;
  58. height: 31px;
  59. background: rgba(255, 255, 255, 0.2);
  60. margin: 16px 30px 16px 0;
  61. float: left;
  62. }
  63. .header-menu {
  64. line-height: 64px;
  65. }
  66. .sider-menu {
  67. height: 100%;
  68. border-right: 0;
  69. }
  70. .inner-layout {
  71. padding: 0 24px 24px;
  72. }
  73. nz-breadcrumb {
  74. margin: 16px 0;
  75. }
  76. nz-content {
  77. background: #fff;
  78. padding: 24px;
  79. min-height: 280px;
  80. }
  81. `
  82. ]
  83. })
  84. export class NzDemoLayoutTopSide2Component {}

Layout布局 - 图6

顶部-侧边布局

拥有顶部导航及侧边栏的页面,多用于展示类网站。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-top-side',
  4. template: `
  5. <nz-layout>
  6. <nz-header>
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
  9. <li nz-menu-item>nav 1</li>
  10. <li nz-menu-item nzSelected>nav 2</li>
  11. <li nz-menu-item>nav 3</li>
  12. </ul>
  13. </nz-header>
  14. <nz-content class="outer-content">
  15. <nz-breadcrumb>
  16. <nz-breadcrumb-item>Home</nz-breadcrumb-item>
  17. <nz-breadcrumb-item>List</nz-breadcrumb-item>
  18. <nz-breadcrumb-item>App</nz-breadcrumb-item>
  19. </nz-breadcrumb>
  20. <nz-layout class="inner-layout">
  21. <nz-sider nzWidth="200px" nzTheme="light">
  22. <ul nz-menu nzMode="inline" class="sider-menu">
  23. <li nz-submenu nzOpen nzTitle="subnav 1" nzIcon="user">
  24. <ul>
  25. <li nz-menu-item nzSelected>option1</li>
  26. <li nz-menu-item>option2</li>
  27. <li nz-menu-item>option3</li>
  28. <li nz-menu-item>option4</li>
  29. </ul>
  30. </li>
  31. <li nz-submenu nzTitle="subnav 2" nzIcon="laptop">
  32. <ul>
  33. <li nz-menu-item>option5</li>
  34. <li nz-menu-item>option6</li>
  35. <li nz-menu-item>option7</li>
  36. <li nz-menu-item>option8</li>
  37. </ul>
  38. </li>
  39. <li nz-submenu nzTitle="subnav 3" nzIcon="notification">
  40. <ul>
  41. <li nz-menu-item>option9</li>
  42. <li nz-menu-item>option10</li>
  43. <li nz-menu-item>option11</li>
  44. <li nz-menu-item>option12</li>
  45. </ul>
  46. </li>
  47. </ul>
  48. </nz-sider>
  49. <nz-content class="inner-content">Content</nz-content>
  50. </nz-layout>
  51. <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  52. </nz-content>
  53. </nz-layout>
  54. `,
  55. styles: [
  56. `
  57. .logo {
  58. width: 120px;
  59. height: 31px;
  60. background: rgba(255, 255, 255, 0.2);
  61. margin: 16px 28px 16px 0;
  62. float: left;
  63. }
  64. .header-menu {
  65. line-height: 64px;
  66. }
  67. .outer-content {
  68. padding: 0 50px;
  69. }
  70. nz-breadcrumb {
  71. margin: 16px 0;
  72. }
  73. .inner-layout {
  74. padding: 24px 0;
  75. background: #fff;
  76. }
  77. .sider-menu {
  78. height: 100%;
  79. }
  80. .inner-content {
  81. padding: 0 24px;
  82. min-height: 280px;
  83. }
  84. nz-footer {
  85. text-align: center;
  86. }
  87. `
  88. ]
  89. })
  90. export class NzDemoLayoutTopSideComponent {}

Layout布局 - 图7

侧边布局

侧边两列式布局。页面横向空间有限时,侧边导航可收起。

侧边导航在页面布局上采用的是左右的结构,一般主导航放置于页面的左侧固定位置,辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应,能提高横向空间的使用率,但是整个页面排版不稳定。侧边导航的模式层级扩展性强,一、二、三级导航项目可以更为顺畅且具关联性的被展示,同时侧边导航可以固定,使得用户在操作和浏览中可以快速的定位和切换当前位置,有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-side',
  4. template: `
  5. <nz-layout>
  6. <nz-sider nzCollapsible nzWidth="200px">
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="inline">
  9. <li nz-submenu nzTitle="User" nzIcon="user">
  10. <ul>
  11. <li nz-menu-item>Tom</li>
  12. <li nz-menu-item>Bill</li>
  13. <li nz-menu-item>Alex</li>
  14. </ul>
  15. </li>
  16. <li nz-submenu nzTitle="Team" nzIcon="team">
  17. <ul>
  18. <li nz-menu-item>Team 1</li>
  19. <li nz-menu-item>Team 2</li>
  20. </ul>
  21. </li>
  22. <li nz-menu-item>
  23. <i nz-icon nzType="file"></i>
  24. <span>File</span>
  25. </li>
  26. </ul>
  27. </nz-sider>
  28. <nz-layout>
  29. <nz-header></nz-header>
  30. <nz-content>
  31. <nz-breadcrumb>
  32. <nz-breadcrumb-item>User</nz-breadcrumb-item>
  33. <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
  34. </nz-breadcrumb>
  35. <div class="inner-content">
  36. Bill is a cat.
  37. </div>
  38. </nz-content>
  39. <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  40. </nz-layout>
  41. </nz-layout>
  42. `,
  43. styles: [
  44. `
  45. .logo {
  46. height: 32px;
  47. background: rgba(255, 255, 255, 0.2);
  48. margin: 16px;
  49. }
  50. nz-header {
  51. background: #fff;
  52. padding: 0;
  53. }
  54. nz-content {
  55. margin: 0 16px;
  56. }
  57. nz-breadcrumb {
  58. margin: 16px 0;
  59. }
  60. .inner-content {
  61. padding: 24px;
  62. background: #fff;
  63. min-height: 360px;
  64. }
  65. nz-footer {
  66. text-align: center;
  67. }
  68. `
  69. ]
  70. })
  71. export class NzDemoLayoutSideComponent {}

Layout布局 - 图8

自定义触发器

要使用自定义触发器,可以设置 [nzTrigger]="null" 来隐藏默认设定。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-custom-trigger',
  4. template: `
  5. <nz-layout>
  6. <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="inline">
  9. <li nz-submenu nzTitle="User" nzIcon="user">
  10. <ul>
  11. <li nz-menu-item>Tom</li>
  12. <li nz-menu-item>Bill</li>
  13. <li nz-menu-item>Alex</li>
  14. </ul>
  15. </li>
  16. <li nz-submenu nzTitle="Team" nzIcon="team">
  17. <ul>
  18. <li nz-menu-item>Team 1</li>
  19. <li nz-menu-item>Team 2</li>
  20. </ul>
  21. </li>
  22. <li nz-menu-item>
  23. <i nz-icon nzType="file"></i>
  24. <span>File</span>
  25. </li>
  26. </ul>
  27. </nz-sider>
  28. <nz-layout>
  29. <nz-header>
  30. <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="isCollapsed = !isCollapsed"></i>
  31. </nz-header>
  32. <nz-content>
  33. <nz-breadcrumb>
  34. <nz-breadcrumb-item>User</nz-breadcrumb-item>
  35. <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
  36. </nz-breadcrumb>
  37. <div class="inner-content">
  38. Bill is a cat.
  39. </div>
  40. </nz-content>
  41. <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  42. </nz-layout>
  43. </nz-layout>
  44. `,
  45. styles: [
  46. `
  47. .trigger {
  48. font-size: 18px;
  49. line-height: 64px;
  50. padding: 0 24px;
  51. cursor: pointer;
  52. transition: color 0.3s;
  53. }
  54. .trigger:hover {
  55. color: #1890ff;
  56. }
  57. .logo {
  58. height: 32px;
  59. background: rgba(255, 255, 255, 0.2);
  60. margin: 16px;
  61. }
  62. nz-header {
  63. background: #fff;
  64. padding: 0;
  65. }
  66. nz-content {
  67. margin: 0 16px;
  68. }
  69. nz-breadcrumb {
  70. margin: 16px 0;
  71. }
  72. .inner-content {
  73. padding: 24px;
  74. background: #fff;
  75. min-height: 360px;
  76. }
  77. nz-footer {
  78. text-align: center;
  79. }
  80. `
  81. ]
  82. })
  83. export class NzDemoLayoutCustomTriggerComponent {
  84. isCollapsed = false;
  85. }

Layout布局 - 图9

响应式布局

nz-sider 支持响应式布局。

说明:配置 nzBreakpoint 属性即生效,视窗宽度小于 nzBreakpointnz-sider 缩小为 nzCollapsedWidth 宽度,若将 nzCollapsedWidth 设置为零,会出现特殊 trigger。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-responsive',
  4. template: `
  5. <nz-layout class="layout">
  6. <nz-sider nzCollapsible nzBreakpoint="lg" [nzCollapsedWidth]="0">
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="inline">
  9. <li nz-menu-item>
  10. <i nz-icon nzType="user"></i>
  11. <span>nav 1</span>
  12. </li>
  13. <li nz-menu-item>
  14. <i nz-icon nzType="video-camera"></i>
  15. <span>nav 2</span>
  16. </li>
  17. <li nz-menu-item>
  18. <i nz-icon nzType="upload"></i>
  19. <span>nav 3</span>
  20. </li>
  21. <li nz-menu-item>
  22. <i nz-icon nzType="user"></i>
  23. <span>nav 4</span>
  24. </li>
  25. </ul>
  26. </nz-sider>
  27. <nz-layout>
  28. <nz-header></nz-header>
  29. <nz-content>
  30. <div class="inner-content">
  31. Content
  32. </div>
  33. </nz-content>
  34. <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  35. </nz-layout>
  36. </nz-layout>
  37. `,
  38. styles: [
  39. `
  40. .layout {
  41. min-height: 100vh;
  42. }
  43. .logo {
  44. height: 32px;
  45. background: rgba(255, 255, 255, 0.2);
  46. margin: 16px;
  47. }
  48. nz-header {
  49. background: #fff;
  50. padding: 0;
  51. }
  52. nz-content {
  53. margin: 24px 16px 0;
  54. }
  55. .inner-content {
  56. padding: 24px;
  57. background: #fff;
  58. min-height: 360px;
  59. }
  60. nz-footer {
  61. text-align: center;
  62. }
  63. `
  64. ]
  65. })
  66. export class NzDemoLayoutResponsiveComponent {}

Layout布局 - 图10

固定头部

一般用于固定顶部导航,方便页面切换。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-fixed',
  4. template: `
  5. <nz-layout class="layout">
  6. <nz-header>
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="horizontal">
  9. <li nz-menu-item>nav 1</li>
  10. <li nz-menu-item>nav 2</li>
  11. <li nz-menu-item>nav 3</li>
  12. </ul>
  13. </nz-header>
  14. <nz-content>
  15. <nz-breadcrumb>
  16. <nz-breadcrumb-item>Home</nz-breadcrumb-item>
  17. <nz-breadcrumb-item>List</nz-breadcrumb-item>
  18. <nz-breadcrumb-item>App</nz-breadcrumb-item>
  19. </nz-breadcrumb>
  20. <div class="inner-content">Content</div>
  21. </nz-content>
  22. <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  23. </nz-layout>
  24. `,
  25. styles: [
  26. `
  27. .layout {
  28. min-height: 100vh;
  29. }
  30. .logo {
  31. width: 120px;
  32. height: 31px;
  33. background: rgba(255, 255, 255, 0.2);
  34. margin: 16px 24px 16px 0;
  35. float: left;
  36. }
  37. nz-header {
  38. position: fixed;
  39. width: 100%;
  40. }
  41. [nz-menu] {
  42. line-height: 64px;
  43. }
  44. nz-content {
  45. padding: 0 50px;
  46. margin-top: 64px;
  47. }
  48. nz-breadcrumb {
  49. margin: 16px 0;
  50. }
  51. .inner-content {
  52. background: #fff;
  53. padding: 24px;
  54. min-height: 380px;
  55. }
  56. nz-footer {
  57. text-align: center;
  58. }
  59. `
  60. ]
  61. })
  62. export class NzDemoLayoutFixedComponent {}

Layout布局 - 图11

固定侧边栏

当内容较长时,使用固定侧边栏可以提供更好的体验。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-layout-fixed-sider',
  4. template: `
  5. <nz-layout class="layout">
  6. <nz-sider>
  7. <div class="logo"></div>
  8. <ul nz-menu nzTheme="dark" nzMode="inline">
  9. <li nz-menu-item>
  10. <i nz-icon nzType="file"></i>
  11. <span>nav 1</span>
  12. </li>
  13. <li nz-menu-item>
  14. <i nz-icon nzType="video-camera"></i>
  15. <span>nav 2</span>
  16. </li>
  17. <li nz-menu-item>
  18. <i nz-icon nzType="upload"></i>
  19. <span>nav 3</span>
  20. </li>
  21. <li nz-menu-item>
  22. <i nz-icon nzType="bar-chart"></i>
  23. <span>nav 4</span>
  24. </li>
  25. <li nz-menu-item>
  26. <i nz-icon nzType="cloud-o"></i>
  27. <span>nav 5</span>
  28. </li>
  29. <li nz-menu-item>
  30. <i nz-icon nzType="appstore-o"></i>
  31. <span>nav 6</span>
  32. </li>
  33. <li nz-menu-item>
  34. <i nz-icon nzType="team"></i>
  35. <span>nav 7</span>
  36. </li>
  37. <li nz-menu-item>
  38. <i nz-icon nzType="shop"></i>
  39. <span>nav 8</span>
  40. </li>
  41. </ul>
  42. </nz-sider>
  43. <nz-layout class="right-layout">
  44. <nz-header></nz-header>
  45. <nz-content>
  46. <div class="inner-content">
  47. ...
  48. <br />
  49. Really
  50. <br />...<br />...<br />...<br />
  51. long
  52. <br />...<br />...<br />...<br />...<br />...<br />... <br />...<br />...<br />...<br />...<br />...<br />...
  53. <br />...<br />...<br />...<br />...<br />...<br />... <br />...<br />...<br />...<br />...<br />...<br />...
  54. <br />...<br />...<br />...<br />...<br />...<br />... <br />...<br />...<br />...<br />...<br />...<br />...
  55. <br />...<br />...<br />...<br />...<br />...<br />
  56. content
  57. </div>
  58. </nz-content>
  59. <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  60. </nz-layout>
  61. </nz-layout>
  62. `,
  63. styles: [
  64. `
  65. .logo {
  66. height: 32px;
  67. background: rgba(255, 255, 255, 0.2);
  68. margin: 16px;
  69. }
  70. .layout {
  71. min-height: 100vh;
  72. }
  73. nz-sider {
  74. overflow: auto;
  75. height: 100%;
  76. position: fixed;
  77. left: 0;
  78. }
  79. .right-layout {
  80. margin-left: 200px;
  81. }
  82. nz-header {
  83. background: #fff;
  84. padding: 0;
  85. }
  86. nz-content {
  87. margin: 24px 16px 0;
  88. overflow: initial;
  89. }
  90. .inner-content {
  91. padding: 24px;
  92. background: #fff;
  93. text-align: center;
  94. }
  95. nz-footer {
  96. text-align: center;
  97. }
  98. `
  99. ]
  100. })
  101. export class NzDemoLayoutFixedSiderComponent {}

API

  1. <nz-layout>
  2. <nz-header>header</nz-header>
  3. <nz-layout>
  4. <nz-sider>left sidebar</nz-sider>
  5. <nz-content>main content</nz-content>
  6. <nz-sider>right sidebar</nz-sider>
  7. </nz-layout>
  8. <nz-footer>footer</nz-footer>
  9. </nz-layout>

nz-sidercomponent

侧边栏。

参数说明类型默认值
[nzBreakpoint]触发响应式布局的断点‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’-
[nzCollapsed]当前收起状态boolean-
[nzCollapsedWidth]收缩宽度,设置为 0 会出现特殊 triggernumber64
[nzCollapsible]是否可收起booleanfalse
[nzCollapsed]当前收起状态,可双向绑定booleanfalse
[nzReverseArrow]翻转折叠提示箭头的方向,当 Sider 在右边时可以使用booleanfalse
[nzTrigger]自定义 trigger,设置为 null 时隐藏 triggerTemplateRef<void>-
[nzZeroTrigger]自定义 nzCollapsedWidth 为 0 时的 特殊triggerTemplateRef<void>-
[nzWidth]宽度number | string200
[nzTheme]主题颜色‘light’ | ‘dark’dark
(nzCollapsedChange)展开-收起时的回调函数EventEmitter<boolean>-

breakpoint width

  1. {
  2. xs: '480px',
  3. sm: '768px',
  4. md: '992px',
  5. lg: '1200px',
  6. xl: '1600px',
  7. xxl: '1600px'
  8. }