iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

用 Angular Material 開發應用程式 系列

當今應用系統的前端介面除了要提供較好的使用者經驗 (UX) 之外,也要因應多種不同尺寸的裝置,讓整體前端開發的複雜度日益增加,因而發展出如 Ngx-bootstrap、PrimeNG、Angular Material 與 AG Grid 等各種不同的 UI Library,封裝了常用的 UI 操作元件,來減少開發介面所需要的成本。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1 - 序言

日益複雜的前端介面 當今應用系統的前端介面除了要提供較好的使用者經驗 (UX) 之外,也要因應多種不同尺寸的裝置,讓整體前端開發的複雜度日益增加,因而發展出如...

2024-09-15 ‧ 由 阿壹 分享
DAY 2

Day 2 - 安裝

在 Angular 中除了利用 npm 語法安裝特定的套件外,也可以利用 ng add 命令來依照 Angular Schematics 定義安裝並設定套件。...

2024-09-16 ‧ 由 阿壹 分享
DAY 3

Day 3 - 標題列與按鈕

一開始我們來利用 Angular Material 的 Toolbar、Button 與 Badge 三個來實作待辦事項的標題列。 Toolbar Angula...

2024-09-17 ‧ 由 阿壹 分享
DAY 4

Day 4 - 圖示與側邊欄

昨天建立了標題列元件,今天來利用 Icon、Menu 與 Sidenav 等 Angular Material 元件增加標題列的功能。 Icon 在我們安裝 A...

2024-09-18 ‧ 由 阿壹 分享
DAY 5

Day 5 - 資料表清單

今天來利用 Angular Material 的 Table 元件,建立工作事項的資料表清單元件。 新增 Table 元件 在使用 Angular Mater...

2024-09-19 ‧ 由 阿壹 分享
DAY 6

Day 6 - 分頁與排序

今天來在工作事項資料表元件上加入分頁與排序功能。 Paginator 相較於我們在使用 ng add 命令產生 Table 元件時,Schematics 把分頁...

2024-09-20 ‧ 由 阿壹 分享
DAY 7

Day 7 - 卡片

昨天完成用資料表來顯示工作事項清單,今天來用 Card 來實作另一種呈現清單的方式。 外觀 引用 MatCardModule 後,就可以利用 <mat-c...

2024-09-21 ‧ 由 阿壹 分享
DAY 8

Day 8 - Table 的收合

Button Toggle 在實作表單的手風琴之前,先利用 Button Toggle 來實作一般與收合兩種清單的切換,此元件是一種可單選或多選的選擇型按鈕。在...

2024-09-22 ‧ 由 阿壹 分享
DAY 9

Day 9 - 手風琴與清單 (List)

Expansion Panel 在 Angular Material 中可以利用 Expansion Panel 來實作手風琴的功能,在引用 MatExpans...

2024-09-23 ‧ 由 阿壹 分享
DAY 10

Day 10 - 彈跳視窗

彈跳視窗在應用程式的介面中是一種常用的操作方式,今天來利用 Material 的 Dialog 實作工作事項內容的檢視。 彈跳視窗定義 在引用 MatDialo...

2024-09-24 ‧ 由 阿壹 分享