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 篇文章 | 288 人訂閱 訂閱系列文 RSS系列文 團隊2018 新年快樂
DAY 11

[Angular Material完全攻略] Day 11 - 打造問卷頁面(3) - Datepicker

昨天我們介紹了兩個常用的輸入元件,分別是Input及Autocomplete,在提到Input時有介紹當<input type>設為date時,會依...

2017-12-29 ‧ 由 黃升煌 Mike 分享
DAY 12

[Angular Material完全攻略] Day 12 - 打造問卷頁面(4) - Select

前兩天我們很精實的學習的跟Input相關的3個元件-Input、Autocomplete和Datepicker。今天我們用比較輕鬆的步調來介紹另一個常用的元件-...

2017-12-30 ‧ 由 黃升煌 Mike 分享
DAY 13

[Angular Material完全攻略] Day 13 - 打造問卷頁面(5) - Form Field

前幾天我們介紹了幾個Angular Material常見的文字型表單欄位控制項,如Input、Autocomplete、Datepicker和Select。這些...

2017-12-31 ‧ 由 黃升煌 Mike 分享
DAY 14

[Angular Material完全攻略] Day 14 - 打造問卷頁面(6) - Checkbox、Radio和Slide Toggle

昨天我們介紹了Angular Material的Form Field,為我們的輸入類型控制項帶來一致的顯示成果;今天我們來介紹三個相對簡單但是使用頻率也非常高的...

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

[Angular Material完全攻略] Day 15 - 打造問卷頁面(7) - Slider

今天我們要介紹目前Angular Material裡面關於Form Control的最後一個元件-Slider;完成Slider的學習之後,問卷頁面也會在此告一...

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

[Angular Material完全攻略] Day 16 - 設計一個部落格(1) - Grid List

在前幾天介紹完各式各樣的表單元件後,今天我們要先來看看在Material Design其中一種顯示清單資料的方法-Grid List,以及Angular Mat...

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

[Angular Material完全攻略] Day 17 - 設計一個部落格(2) - Card

在昨天介紹完Grid List之後,今天我們要介紹一個Material Design中被使用頻率非常高,且個人認為是Material Design中很經典的元件...

2018-01-04 ‧ 由 黃升煌 Mike 分享
DAY 18

[Angular Material完全攻略] Day 18 - 設計一個部落格(3) - Progress Bar、Progress Spinner

昨天我們介紹了好用的Card,並透過Card來顯示部落格的文章,今天我們要來介紹兩個跟顯示進度有關係的元件,分別是Progress Bar和Progress S...

2018-01-05 ‧ 由 黃升煌 Mike 分享
DAY 19

[Angular Material完全攻略] Day - 19 - 設計一個部落格(4) - Dialog

昨天我們輕鬆地介紹兩個與進度有關的元件,今天讓我們稍微精實一點,來介紹一下寫程式多於寫HTML的Dialog,不管在不在SPA架構,Dialog都是經典且極為重...

2018-01-06 ‧ 由 黃升煌 Mike 分享
DAY 20

[Angular Material完全攻略] Day 20 - 設計一個部落格(5) - Chip、Tooltip、Snackbar

今天是Angular Material部落格篇的最後一天,我們要一口氣介紹三個元件,分別是Chip、Tooltip和Snackbar,其中Chip很適合用來當作...

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