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 1

達標好文 [Angular Material完全攻略] Day 01 - 開始 & 簡介

從Angular第2版正式release後,根據全球最大工程師討論區StackOverflow的統計,從2016開始的Angular討論度就不斷竄升,甚至超越了...

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

[Angular Material完全攻略] Day 02 - 環境設定 & 安裝 & Hello World

今天我們將開始正式邁入Angular Material的世界,要學習使用Angular Material打造高品質及高質感的網頁,當然要從安裝Angular M...

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

[Angular Material完全攻略] Day 03 - MatIcon (及顏色配置介紹)

今天是第一天正式介紹Angular Material的相關元件,就讓我們先從比較簡單輕鬆的Icon來開始,雖然說是比較簡單輕鬆,但其實裡面也是有不少學問的,透過...

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

[Angular Material完全攻略] Day 04 - MatButton、MatButtonToggle和MatRipple

今天我們要來介紹Angular Material按鈕(button)的使用方法,按鈕可以說是一切互動介面的基本,只要按下了按鈕,所有事情都可能會發生,也因此設計...

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

[Angular Material完全攻略] Day 05 - 打造基本後台(1) - SideNav

我們終於要正式開始時做一個後台(dashboard)畫面啦,今天我們會先使用Angular Material的SideNav元件,把邊欄的空間先切出來,這個空間...

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

[Angular Material完全攻略] Day 06 - 打造基本後台(2) - Toolbar

在昨天介紹SideNav時,我們有稍微提到過Toolbar,今天我們就比較認真的來看看Material Design中Toolbar的特性,及Angular M...

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

[Angular Material完全攻略] Day 07 - 打造基本後台(3) - List

昨天我們把整個後台系統的架構基本上完成了,今天我們要來學習使用Angular Material的List元件,來填滿SideNav。List元件功能非常強大,而...

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

[Angular Material完全攻略] Day 08 - 打造基本後台(4) - Menu

今天我們要來講Angular Material的Menu元件,Menu可以說是非常具有歷史性的功能,使用機會也不低,只要有一系列的選擇要濃縮在一個範圍內時,就是...

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

[Angular Material完全攻略] Day 09 - 打造問卷頁面(1) - Stepper

昨天我們已經完成了一個基本的後台版型,今天開始我們要使用Angular Material來製作一個問卷調查的頁面,這個練習主要會學到所有Angular Mate...

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

[Angular Material完全攻略] Day 10 - 打造問卷頁面(2) - Input、Autocomplete

接下我們要來介紹幾個在Material Design中屬於Input,也就是文字輸入欄位相關的功能,文字輸入也可以說是表單裡面最常使用到的欄位!接下來就來看看A...

2017-12-28 ‧ 由 黃升煌 Mike 分享