Angular 入门教程系列：26：使用zorro进行页面布局

最新推荐文章于 2024-08-12 09:02:03 发布

淼叔

最新推荐文章于 2024-08-12 09:02:03 发布

阅读量6.9k

点赞数 1

分类专栏： # 前端 # Angular快速入门

本文链接：https://blog.csdn.net/liumiaocn/article/details/81348316

版权

本文详述如何在Angular应用中利用ng-zorro-antd的layout组件进行页面布局，包括Default Layout，以及结合24栅格系统的grid布局。通过设置html和css，可以创建并显示所需内容。

摘要由CSDN通过智能技术生成

这篇文章介绍一下Angular应用的页面布局方式，这里直接使用ng-zorro-antd的页面布局方式进行举例。

zorro的页面布局

简单的来说，zorro的layout有如下几种组件

类型	说明
nz-layout	布局容器，与其他layout组件结合使用
nz-header	顶部布局部分，与nz-layout结合使用
nz-sider	侧边栏，与nz-layout结合使用
nz-content	内容布局，与nz-layout结合使用
nz-footer	底部布局，与nz-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.