Angular 入門教程系列:26:使用zorro進行頁面佈局
這篇文章介紹一下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.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進行結合,基本上就能作出大部分所需要的實際頁面佈局。
參考文獻
相關推薦
Angular 入門教程系列:26:使用zorro進行頁面佈局
這篇文章介紹一下Angular應用的頁面佈局方式,這裡直接使用ng-zorro-antd的頁面佈局方式進行舉例。 zorro的頁面佈局 簡單的來說,zorro的layout有如下幾種元件 型別 說明 nz-layout 佈局
Angular 入門教程系列:38:升級小結(5.2->6.1)
在前面的文章中也曾經分別提到過,angular6由於存在一些稍大的變化,所以不能像Angular4到Angular5那樣基本無感地進行升級,這裡結合官方提示,簡單整理一下Angular5.2到目前穩定的
Angular 入門教程系列:35:Restful的增刪改查
這篇文章來介紹一下如何進行前後端互動,一個常見的場景就是前端呼叫後端提供的restful api,進行增刪改查,結合之前提到的新版本的http模組和rxjs,這篇文章首先使用kong搭建一個提供後端restful的api介面,對微服務的api增刪改查進行處理,以
Angular 入門教程系列 34 Angular6下的Http模塊與Rxjs6
系列 .get interval coff pcl UNC schedule span sch Angular6的升級,略有影響的地方應該主要集中在Rxjs6,而至於http,在Angular4.3之後就發生了變化,如果沒有欠債的話,升級應該很簡單。即使有欠債的話,修改的
Angular 4入門教程系列:17:NG-ZORRO:Layout
這篇文章介紹一下如何使用NG-ZORRO的layout相關的元件。 layout 概述 元件 說明 限制 [nz-layout] nz-layout佈局容器
Angular 4入門教程系列:9:TypeScript:ECMAScript之前世今生
在以例子為主的官方介紹中,我們學習到了npm install typescript,也看過tsconfig.json的typescript配置檔案的配置檔案,比如裡面寫的ES5到底是什麼。另外那些.ts的檔案,都是typescript的,跟angular有什
Angular 4入門教程系列:1:HelloWorld
ngular作為目前前端的一個重要選擇,加之背後站著google,得到了越來越多的開發者的青睞。但是發現沒有按照由淺入深地例項化的教程,雖然官網的教程已經不錯,但是初始入門的細節沒有提到,再加之網路等問題,決定把官網的教程替大家做一遍給大家留個筆記。同時可能會結合docker
Angular 4入門教程系列 15 NG-ZORRO的使用方式
這篇文章介紹一下Angular的優秀國內UI元件庫NG-ZORRO,並演示一下如何使引入NG-ZORRO到專案之中。 Why NG-ZORRO NG-ZORRO由阿里計算平臺事業部、阿里雲等不同部門的開發人員在原業務元件的基礎上構建而成,於2017/8/15在github上釋出了第一個對外的版本
Node入門教程(3)第二章: Node 安裝
nod ash pan -m 通過 windows linu 方式 spa Node 安裝 官網下載地址: https://nodejs.org/en/download/ 安裝方式 windows 下安裝 建議直接選擇:Windows Installer (
Redux 入門教程(三):React-Redux 的用法
建立 www counter reducer creates 所有 port 操作 lin 作者: 阮一峰 前兩篇教程介紹了 Redux 的基本用法和異步操作,今天是最後一部分,介紹如何在 React 項目中使用 Redux。 為了方便使用,Redux 的作者封裝
Asp.net Core IdentityServer4 入門教程(一):概念解析
什麽 ica 統一 理解 給他 分享 目錄 .net 系統 目錄 1、IdentityServer4 是什麽 2、什麽是OpenID和OAuth 2.0協議 3、IdentityServer4 可以用來做什麽 其他 1、IdentityServer4 是什麽 Ident
Spring Boot入門教程(四十八):初始化操作 CommandLineRunner和ApplicationRunner
CommandLineRunner和ApplicationRunner在SpringApplication.run()之前,在所有的beans載入完成之後執行,用於執行一些初始化操作(如載入快取、讀取配置檔案、建立執行緒池等) CommandLineRunner和Applicatio
Linux小小白入門教程(三):Linux資料夾
學習一個作業系統的使用,最先應該搞清楚的是他的C盤、D盤、E盤。 一、Linux的資料夾 Linux和Windows最大的區別是,Windows有C盤、D盤的概念,但是在Linux上沒有碟符的概念。Linux只有一個碟符,那就是“/”。你沒有看錯,就是一個斜杆。這個
Linux小小白入門教程(二):Linux系統安裝
學些Linux最好的方式就是實際操作一番。所以安裝Linux是必然,否則永遠學不會。考慮到學習的方便性,我們將會使用虛擬機器來安裝Linux作業系統。 下載CentOS7系統映象 為了降低大家學習成本,建議大家安裝的Linux版本統一為Centos 7 。下載地址自
《Flask 入門教程》第一章:準備工作
在通過這本書學習 Flask 開發前,我假設你瞭解了 Python 和 HTML 的基礎知識。你的 Python 版本可以是 2.7,也可以是 3.3 及以上版本。電腦的作業系統可以是 Windows,也可以是 macOS 或 Linux。 安裝編輯器和瀏覽器 對於編輯器來說,每個人都有不同的偏好,你可以自由
Unity Shader入門教程(二) :實現頂點和片元著色器之間的通訊
這篇文章將介紹Pass{}內的程式碼的編寫。我們先看如下Unity Shader程式碼:(此文部分採自《unity shader入門精要》) 關於頂點著色器和片元著色器不懂的學習可以自行搜尋概念的意思,這裡就不介紹了。 Shader "Custom/myTest" {
Linux小小白入門教程(六):建立和刪除資料夾
以下操作在Linux終端進行。Linux因為許可權非常嚴格,所以暫時所有的命令操作全部是在/home資料夾下的/yangjw資料夾下進行。/yangjw資料夾就是登入使用者名稱所在的資料夾,出了此資料
Linux小小白入門教程(五):顯示和進入資料夾
以下操作在Linux終端進行。Linux因為許可權非常嚴格,所以暫時所有的命令操作全部是在/home資料夾下的/yangjw資料夾下進行。/yangjw資料夾就是登入使用者名稱所在的資料夾,出了此資料
Linux小小白入門教程(七):vi文字編輯命令
以下操作在Linux終端進行。Linux因為許可權非常嚴格,所以暫時所有的命令操作全部是在/home資料夾下的/yangjw資料夾下進行。/yangjw資料夾就是登入使用者名稱所在的資料夾,出了此資料
Linux小小白入門教程(八):閱讀文字命令
以下操作在Linux終端進行。Linux因為許可權非常嚴格,所以暫時所有的命令操作全部是在/home資料夾下的/yangjw資料夾下進行。/yangjw資料夾就是登入使用者名稱所在的資料夾,出了此資料