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
[[email protected] app]# cat app.component.css
.nz-sample HTML
[[email protected] 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>
[[email protected] app]#結果確認
相關推薦
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上釋出了第一個對外的版本
Angular 4入門教程系列 14 PrimeNG的使用方式
這篇文章介紹一下Angular的老牌UI元件庫PrimeNG，並演示一下如何使引入PrimeNG到專案之中。 Why PrimeNG 使用PrimeNG有很多原因，比如 70多個完善的元件 開源 提高生產性 多種主題 高度可定製的模板 移動端使用者體驗的
Angular 4入門教程系列 18 編譯優化與nginx壓縮
才會 app angular 技術分享 view 註入攻擊 人工智 root 速度 angular使用缺省的方式進行ng build往往會生成一個幾M字節的vendor.bundle.js文件，使用–prod的選項進行編譯可以有效降低size，如果還不能滿足要求的話可以
Angular 入門教程系列：38：升級小結(5.2->6.1)
在前面的文章中也曾經分別提到過，angular6由於存在一些稍大的變化，所以不能像Angular4到Angular5那樣基本無感地進行升級，這裡結合官方提示，簡單整理一下Angular5.2到目前穩定的
Angular 入門教程系列：35：Restful的增刪改查
這篇文章來介紹一下如何進行前後端互動，一個常見的場景就是前端呼叫後端提供的restful api，進行增刪改查，結合之前提到的新版本的http模組和rxjs，這篇文章首先使用kong搭建一個提供後端restful的api介面，對微服務的api增刪改查進行處理，以
Angular 入門教程系列：26：使用zorro進行頁面佈局
這篇文章介紹一下Angular應用的頁面佈局方式，這裡直接使用ng-zorro-antd的頁面佈局方式進行舉例。 zorro的頁面佈局 簡單的來說，zorro的layout有如下幾種元件 型別 說明 nz-layout 佈局
Angular 入門教程系列 34 Angular6下的Http模塊與Rxjs6
系列 .get interval coff pcl UNC schedule span sch Angular6的升級，略有影響的地方應該主要集中在Rxjs6，而至於http，在Angular4.3之後就發生了變化，如果沒有欠債的話，升級應該很簡單。即使有欠債的話，修改的
[Gradle中文教程系列]-跟我學Gradle-附錄：gradle命令列詳解
Gradle 命令列命令詳解,根據Gradle.2.13版本的help命令編寫而來. 引數 描述 -?, -h, –help 顯示幫助 - - ….. -a,
asp.net core入門教程系列 （一）
home padding 方式 title sys 活性 elf tro ash Asp.Net Core簡介 ASP.NET Core 是一個全新的開源、跨平臺框架，可以用它來構建基於網絡連接的現代雲應用程序，比如：Web 應用，IoT（Internet Of Thin
WPF入門教程系列十——布局之Border與ViewBox（五）
last () put prev 裝飾 wpf 背景 .text 部分 九. Border Border 是一個裝飾的控件，此控件繪制邊框及背景，在 Border 中只能有一個子控件，若要顯示多個子控件，需要將一個附加的 Panel 控件放置在父 Border 中。然後可以
WPF入門教程系列二十一——DataGrid示例(一)
lec enum zip def 包含 布爾 edit 圖1 date 前面我們學習了ListView控件的使用示例，今天我們來學習DataGrid的有關知識。提到DataGrid 不管是Asp.Net中的網頁開發還是WinForm應用程序開發都會頻繁使用。通過它我們可以
WPF入門教程系列八——布局之Grid與UniformGrid（三）
input 接下來 toolbar wid ids 全部 ica tar 生成 五. Grid Grid顧名思義就是“網格”，它的子控件被放在一個一個實現定義好的小格子裏面，整齊配列。 Grid和其他各個Panel比較起來，功能最多也最為復雜。要使用Grid，首先要向Row
WPF入門教程系列十一——依賴屬性（一）
nts 如果 edev 出現 樣式 語法 寫法 屬性。 結構 一、依賴屬性基本介紹 本篇開始學習WPF的另一個重要內容依賴屬性。 大家都知道WPF帶來了很多新的特性，其中一個就是引入了一種新的屬性機制——依賴屬性。依賴屬性出現的目的是用來實現WPF中的樣式、自
WPF入門教程系列十四——依賴屬性（四）
nan out rmi strong too nim app controls ase 六、依賴屬性回調、驗證及強制值 我們通過下面的這幅圖，簡單介紹一下WPF屬性系統對依賴屬性操作的基本步驟： 借用一個常見的圖例，介紹一下WPF屬性系統對依賴屬性操作的基本
WPF入門教程系列十七——WPF中的數據綁定(三)
控件 命名空間 布局 獲得 key gif lns return 生日 四、 XML數據綁定 這次我們來學習新的綁定知識，XML數據綁定。XmlDataProvider 用來綁定 XML 數據，該XML數據可以是嵌入.Xmal文件的 XmlDataProvider
WPF入門教程系列四——Dispatcher介紹
匹配 添加 itl 屬性 one tree 獲得 都對 toggle 一、Dispatcher介紹 微軟在WPF引入了Dispatcher，那麽這個Dispatcher的主要作用是什麽呢？ 不管是WinForm應用程序還是WPF應用程序，實際上都是一個進
WPF入門教程系列六——布局介紹與Canvas（一）
mouse 建議 geo 自動調整 範圍 添加 ges ans colors 從這篇文章開始是對WPF中的界面如何布局做一個較簡單的介紹，大家都知道：UI是做好一個軟件很重要的因素，如果沒有一個漂亮的UI，功能做的再好也無法吸引很多用戶使用，而且沒有漂亮的界面，那麽普通用