鐵人檔案
當今應用系統的前端介面除了要提供較好的使用者經驗 (UX) 之外，也要因應多種不同尺寸的裝置，讓整體前端開發的複雜度日益增加，因而發展出如 Ngx-bootstrap、PrimeNG、Angular Material 與 AG Grid 等各種不同的 UI Library，封裝了常用的 UI 操作元件，來減少開發介面所需要的成本。
今天來在圖示按鈕上加入提示文字，並在昨天實作的彈跳視窗中加入頁籤的實作。 Tooltip 在應用程式的操作中，我們有時會把一些補充的文字放在提示文字中，讓使用者...
表單是應用程式中讓使用者輸入資料的功能，今天來利用 Angular Material 提供的表單元件來實作工作事項表單。 Form Field 在引用 MatF...
除了輸入框類型的表單外，選擇性類型的表單也是常用的輸入方式。 下拉式選單 在引用 MatSelectModule 後，就可以利用 <mat-select&...
AutoComplete 在引用 MatAutocompleteModule 模組後，就可以在輸入文字框中加入自動完成的功能。 <mat-form-fi...
單選日期 日期也是常用的表單需求，而引用 MatDatepickerModule 模組後就可以使用 Material 的日期選擇器。不過因為此與日期相關，會有...
SnackBar 要實作在使用者完成特定作業後，應用程式需要顯示對應的訊息來通知使用者的需求，可以透過 MatSnackBarModule 模組內的 MatSn...
Stepper 有時候我們希望讓使用者依特定步驟輸入資料，此時可以引用 MatStepperModule 模組來使用 <mat-stepper>...
Angular Material 也有提供樹狀結構的元件，此元件與 MatTable 一樣可以定義一個實作 DataSource 的類別作為樹狀結構的資料來源...
在 Angular 專案中撰寫與介面操作有關的單元測試時，常會使用 Page 物件來封裝頁面元素。而 Angualr CDK 裡也有提出 Component H...
昨天描述在單元測試中使用 Angular CDK 的 Harness 來操控介面上的控制項，今天來看其他元件的 Harness 類別 Table 首先，在資料表...
