當今應用系統的前端介面除了要提供較好的使用者經驗 (UX) 之外,也要因應多種不同尺寸的裝置,讓整體前端開發的複雜度日益增加,因而發展出如 Ngx-bootstrap、PrimeNG、Angular Material 與 AG Grid 等各種不同的 UI Library,封裝了常用的 UI 操作元件,來減少開發介面所需要的成本。
日益複雜的前端介面 當今應用系統的前端介面除了要提供較好的使用者經驗 (UX) 之外,也要因應多種不同尺寸的裝置,讓整體前端開發的複雜度日益增加,因而發展出如...
在 Angular 中除了利用 npm 語法安裝特定的套件外,也可以利用 ng add 命令來依照 Angular Schematics 定義安裝並設定套件。...
一開始我們來利用 Angular Material 的 Toolbar、Button 與 Badge 三個來實作待辦事項的標題列。 Toolbar Angula...
昨天建立了標題列元件,今天來利用 Icon、Menu 與 Sidenav 等 Angular Material 元件增加標題列的功能。 Icon 在我們安裝 A...
今天來利用 Angular Material 的 Table 元件,建立工作事項的資料表清單元件。 新增 Table 元件 在使用 Angular Mater...
今天來在工作事項資料表元件上加入分頁與排序功能。 Paginator 相較於我們在使用 ng add 命令產生 Table 元件時,Schematics 把分頁...
昨天完成用資料表來顯示工作事項清單,今天來用 Card 來實作另一種呈現清單的方式。 外觀 引用 MatCardModule 後,就可以利用 <mat-c...
Button Toggle 在實作表單的手風琴之前,先利用 Button Toggle 來實作一般與收合兩種清單的切換,此元件是一種可單選或多選的選擇型按鈕。在...
Expansion Panel 在 Angular Material 中可以利用 Expansion Panel 來實作手風琴的功能,在引用 MatExpans...
彈跳視窗在應用程式的介面中是一種常用的操作方式,今天來利用 Material 的 Dialog 實作工作事項內容的檢視。 彈跳視窗定義 在引用 MatDialo...