iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

Angular Material完全攻略 系列

Material Design是Google推出的設計語言,用來打造兼具視覺效果及可用性的網頁;自從Angular版本更新到5以後,Angular Material也從2.0.0-beta.12直接跳到5.0.0-rc0,在歷經多次的breaking changes之後,竟然敢宣稱到rc版,想必breaking changes也會開始大幅減少且趨於穩定,這是個非常好的切入學習點,本系列文章將會介紹當前所有的Angular Material元件、Angular CDK以及一些進階的Angular Material使用技巧,並一步一步完成有Material Design風格的後台系統及相關頁面。

鐵人鍊成 | 共 34 篇文章 | 247 人訂閱 訂閱系列文 RSS系列文 團隊2018 新年快樂
DAY 21

[Angular Material完全攻略] Day 21 - 收件夾頁面(1) - Expansion Panels

今天開始我們又要進入一個新的頁面-「收件夾」囉!先從比較輕鬆的Expansion Panel開始,我們會使用這個元件在畫面左邊建立一個類似收件夾大綱/分類的清單...

2018-01-08 ‧ 由 黃升煌 Mike 分享
DAY 22

[Angular Material完全攻略] Day 22 - 收件夾頁面(2) - Tabs

昨天我們介紹了Expansaion Panels,替收件夾的左邊加上了基本的分類資訊,今天讓我們來使用Angular Material的Tab元件,來把右邊也填...

2018-01-09 ‧ 由 黃升煌 Mike 分享
DAY 23

[Angular Material完全攻略] Day 23 - 收件夾頁面(3) - Table (基礎功能)

今天我們要來介紹Angular Material中最複雜的元件之一:表格Table。透過組合table、sort header和paginator這三個功能,我...

2018-01-10 ‧ 由 黃升煌 Mike 分享
DAY 24

[Angular Material完全攻略] Day 24 - 收件夾頁面(4) - Table (進階功能)

昨天我們把一個data table的基礎功能-「顯示資料、分頁、排序」都大致說明了一遍,今天我們來講一些進階的data table用法,以及分頁和排序元件的補充...

2018-01-11 ‧ 由 黃升煌 Mike 分享
DAY 25

[Angular Material完全攻略] Day 25 - Angular CDK(1) - 基礎介紹

我們即將要邁入新的篇章-Angular CDK,我們今天先不來寫程式,而是大致的把目前(5.0.0)Angular CDK的架構做一個整體的介紹,讓讀者們能先在...

2018-01-12 ‧ 由 黃升煌 Mike 分享
DAY 26

[Angular Material完全攻略] Day 26 - Angular CDK(2) - Accessibility

今天我們要來介紹第一個Angular CDK的分類功能-Accessibility。Accessibility(簡稱A11y)主要是放置一些方便與使用者互動的功...

2018-01-13 ‧ 由 黃升煌 Mike 分享
DAY 27

[Angular Material完全攻略] Day 27 - Angular CDK(3) - Bidirectionality、Layout

今天我們來講Angular CDK中兩個跟版面配置有關的功能,分別是Bidirectionality、Layout。 Bidirectionality主要是用來...

2018-01-14 ‧ 由 黃升煌 Mike 分享
DAY 28

[Angular Material完全攻略] Day 28 - Angular CDK(4) - Observables、Scrolling

今天我們要介紹兩個比較簡單的Angular CDK功能分類,分別是Observables和Scroll。這兩個功能使用上非常簡單,但乍看之下使用的機會不高,因此...

2018-01-15 ‧ 由 黃升煌 Mike 分享
DAY 29

[Angular Material完全攻略] Day 29 - Angular CDK(5) - Portal

接下來我們要介紹Angular CDK中的Portal分類,透過這裡面的功能,我們可以很容易的動態切換各種不同的元件和templates,讓動態產生內容不再是件...

2018-01-16 ‧ 由 黃升煌 Mike 分享
DAY 30

[Angular Material完全攻略] Day 30 - Angular CDK(6) - Overlay

今天我們要來介紹Angular CDK中的Overlay!Overlay在Angular Material中可以說是隨處可見,只要是任何會從螢幕上彈出資訊的功能...

2018-01-17 ‧ 由 黃升煌 Mike 分享