iT邦幫忙

angular material相關文章
共有 36 則文章

技術 Angular Material 模組列表整理

整理 Angular Material 到(2018/11/15)前的模組列表 Angular Material 共 35 個 Angular Material...

鐵人賽 Modern Web
Angular Material完全攻略 系列 第 34

達標好文 技術 [Angular Material完全攻略] Day 34 - 學習Angular Material的正確姿勢

今天來聊聊筆者這些日子學習Angular Material的方式,希望可以幫助大家能以更快的速度深入Angular Material,並能靈活運用在自己的專案當...

鐵人賽 Modern Web
Angular Material完全攻略 系列 第 33

技術 [Angular Material完全攻略] Day 33 - 雜項技巧(2) - 其他CSS技巧

今天來分享一些筆者近期撰寫Angular Material文章,以及開始在實際專案中使用Angular Material所整理出來的一些CSS小技巧,有些在文件...

鐵人賽 Modern Web
Angular Material完全攻略 系列 第 32

技術 [Angular Material完全攻略] Day 32 - 雜項技巧(1) - 自己的theme自己設計

Angular Material內建了4種不同主題的theme,未來應該還會持續增加,但這些theme未必是我們喜歡的,而在Angular Material中,...

鐵人賽 Modern Web
Angular Material完全攻略 系列 第 31

技術 [Angular Material完全攻略]Angular CDK(隱藏版) - Coercion、Platform

今天我們來講兩個Angular CDK文件上沒有介紹,但很有機會使用到的 隱藏版 功能,分別是型別轉換(coercion)、平台偵測(platform)。 關...

鐵人賽 Modern Web DAY 30
Angular Material完全攻略 系列 第 30

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

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

鐵人賽 Modern Web DAY 29
Angular Material完全攻略 系列 第 29

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

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

鐵人賽 Modern Web DAY 28
Angular Material完全攻略 系列 第 28

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

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

鐵人賽 Modern Web DAY 27
Angular Material完全攻略 系列 第 27

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

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

鐵人賽 Modern Web DAY 26
Angular Material完全攻略 系列 第 26

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

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

鐵人賽 Modern Web DAY 25
Angular Material完全攻略 系列 第 25

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

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

鐵人賽 Modern Web DAY 24
Angular Material完全攻略 系列 第 24

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

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

鐵人賽 Modern Web DAY 23
Angular Material完全攻略 系列 第 23

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

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

鐵人賽 Modern Web DAY 22
Angular Material完全攻略 系列 第 22

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

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

鐵人賽 Modern Web DAY 24
ngrx/store 4 學習筆記 系列 第 24

技術 [ngrx/store-24] Angular 網站實例 - 會員報告篇

Angular 網站實例 - 會員報告篇 今天開始 今天完成 今天的目標:完成網站實例(使用服務) 修改報告服務 為了提供元件一份報告的詳細內容,我們在報告服務...

鐵人賽 Modern Web DAY 21
Angular Material完全攻略 系列 第 21

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

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

鐵人賽 Modern Web DAY 20
Angular Material完全攻略 系列 第 20

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

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

鐵人賽 Modern Web DAY 19
Angular Material完全攻略 系列 第 19

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

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

鐵人賽 Modern Web DAY 18
Angular Material完全攻略 系列 第 18

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

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

鐵人賽 Modern Web DAY 17
Angular Material完全攻略 系列 第 17

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

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

鐵人賽 Modern Web DAY 19
ngrx/store 4 學習筆記 系列 第 19

技術 [ngrx/store-19] Angular 網站實例 - 使用者服務篇

Angular 網站實例 - 使用者服務篇 今天開始 今天完成 今天的目標:完成使用者服務,讓使用者登入畫面能夠透過使用者服務來連結後端 設定使用者服務 (U...

鐵人賽 Modern Web DAY 16
Angular Material完全攻略 系列 第 16

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

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

鐵人賽 Modern Web DAY 15
Angular Material完全攻略 系列 第 15

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

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

鐵人賽 Modern Web DAY 14
Angular Material完全攻略 系列 第 14

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

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

鐵人賽 Modern Web DAY 13
Angular Material完全攻略 系列 第 13

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

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

鐵人賽 Modern Web DAY 12
Angular Material完全攻略 系列 第 12

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

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

鐵人賽 Modern Web DAY 11
Angular Material完全攻略 系列 第 11

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

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

鐵人賽 Modern Web DAY 10
Angular Material完全攻略 系列 第 10

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

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

鐵人賽 Modern Web DAY 9
Angular Material完全攻略 系列 第 9

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

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

鐵人賽 Modern Web DAY 7
Angular Material完全攻略 系列 第 7

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

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