這篇文章介紹一下Angular應用的頁面佈局方式，這裡直接使用ng-zorro-antd的頁面佈局方式進行舉例。

zorro的頁面佈局

簡單的來說，zorro的layout有如下幾種元件

同時，zorro也支援grid方式，將頁面進行24柵格進行劃分

Default Layout

建立Default Layout的元件

liumiaocn:app liumiao$ ng generate component default-layout
CREATE src/app/default-layout/default-layout.component.css (0 bytes)
CREATE src/app/default-layout/default-layout.component.html (33 bytes)
CREATE src/app/default-layout/default-layout.component.spec.ts (678 bytes
 
)
CREATE src/app/default-layout/default-layout.component.ts (300 bytes)
UPDATE src/app/app.module.ts (928 bytes)
liumiaocn:app liumiao$ 

html頁面

liumiaocn:default-layout liumiao$ cat default-layout.component.html 
<nz-layout>
  <nz-header>Layout Header</nz-header>
  <nz-layout>
    <nz-sider
 
>Layout Sider</nz-sider>
    <nz-layout>
      <nz-content>

    <div class="content-box">
      <div nz-row nzGutter="16">
        <div nz-col class="gutter-row" nzSpan="8">
          <div class="gutter-box">col-8</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <div class="gutter-box">col-8</div>
        </div>
        <div nz-col class="gutter-row" nzSpan="8">
          <div class="gutter-box">col-8</div>
        </div>
      </div>
    </div>
      </nz-content>
      <nz-footer>Layout Fotter</nz-footer>
    </nz-layout>
  </nz-layout>
</nz-layout>
liumiaocn:default-layout liumiao$ 

css

liumiaocn:default-layout liumiao$ cat default-layout.component.css
.ant-layout {
  text-align: center;
}

.ant-layout-header {
  background: #11aa88;
}

.ant-layout-sider {
  background: #ebebeb;
}

.ant-layout-content {
  background: #fff;
  line-height: 120px;
  color: #0;
  margin-left: 10px;
}

.ant-layout-footer {
  background: #ebebeb;
  margin-top: 10px;
  margin-left: 10px;
}

.gutter-box {
  height: 400px;
  background: #ebebeb;
  margin: 1px;
}
liumiaocn:default-layout liumiao$

顯示

將app.component.html進行設定，就可以確認顯示內容了

liumiaocn:app liumiao$ cat app.component.html 
<app-default-layout></app-default-layout>
liumiaocn:app liumiao$

使用grid和layout進行結合，基本上就能作出大部分所需要的實際頁面佈局。

參考文獻