Material Design

標籤 (共 35 篇文章)

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

昨天我們把一個data table的基礎功能-「顯示資料、分頁、排序」都大致說明了一遍,今天我們來講一些進階的data table用法,以及分頁和排序元件的補充說明;Angular Material中的分頁和排序功能都很強,而且也不會和<mat-table>綁死,在任何地方可以應用。

就讓我們繼續往下看吧!

繼續閱讀
[Angular Material 完全攻略]收件夾頁面(3) - Table (基礎功能)

今天我們要來介紹Angular Material中最複雜的元件之一:表格Table。透過組合table、sort header和paginator這三個功能,我們會完成一個大部分情境都適用的data table。

Data table可以說是許多軟體都會被使用到的功能,尤其是管理各種資料的後台程式,更是使用data table的大宗來源,而在商務應用上後台軟體的開發需求也是源源不絕,因此data table可以說是前端應用最大的一個議題也不為過!

也因此在Angular Material中要設計data table自然有非常多彈性可以調整的地方,尤其是我們會一次組合3種元件,來完成data table的功能,讓狀況更加的複雜,因此我們會將data table這個主題拆成2篇介紹,今天我們會先完成一個大部分情境都適用的data table,明天則會針對一些細節的部分做進階的介紹;準備好了嗎?開始囉!

繼續閱讀
[Angular Material 完全攻略]收件夾頁面(2) - Tabs

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

Tab元件可以說是許許多多UI都會用到的功能,使用上雖然簡單,但也有許多不同的呈現模式,可以說是最簡單也最複雜的元件之一,接下來就立刻來看看有些什麼變化吧!

繼續閱讀
[Angular Material 完全攻略]收件夾頁面(1) - Expansion Panels

今天開始我們又要進入一個新的頁面-「收件夾」囉!先從比較輕鬆的Expansion Panel開始,我們會使用這個元件在畫面左邊建立一個類似收件夾大綱/分類的清單;透過Expansion Panel我們可以展開/收合不同類型的資料,在瀏覽及管理上都非常方便,就讓我們繼續看下去吧!

繼續閱讀
[Angular Material 完全攻略]設計一個部落格(5) - Chip、Tooltip、Snackbar

今天是Angular Material部落格篇的最後一天,我們要一口氣介紹三個元件,分別是Chip、Tooltip和Snackbar,其中Chip很適合用來當作類似標籤的功能;而Tooltip和Snackbar則是用在不同的地方,作為提示時使用。

繼續閱讀
[Angular Material 完全攻略]設計一個部落格(4) - Dialog

昨天我們輕鬆地介紹兩個與進度有關的元件,今天讓我們稍微精實一點,來介紹一下寫程式多於寫HTML的Dialog,不管在不在SPA架構,Dialog都是經典且極為重要的元件,也因此我們會比較多的時間來介紹,好讓讀著們能完全的掌控Angular Material中的Dialog使用方式!

繼續閱讀
[Angular Material 完全攻略]設計一個部落格(3) - Progress Bar、Progress Spinner

昨天我們介紹了好用的Card,並透過Card來顯示部落格的文章,今天我們要來介紹兩個跟顯示進度有關係的元件,分別是Progress Bar和Progress Spinner,儘管這兩個元件相對簡單很多,但在SPA架構下,這兩個元件可以說是非常核心的功能哩。

繼續閱讀
[Angular Material 完全攻略]設計一個部落格(2) - Card

在昨天介紹完Grid List之後,今天我們要介紹一個Material Design中被使用頻率非常高,且個人認為是Material Design中很經典的元件-Card。我們將利用Card來當作部落格列表的呈現方式。

繼續閱讀
[Angular Material 完全攻略]設計一個部落格(1) - Grid List

在前幾天介紹完各式各樣的表單元件後,今天我們要先來看看在Material Design其中一種顯示清單資料的方法-Grid List,以及Angular Material中如何實現應用這樣的方法,把一個簡易的部落格版型給切出來!

繼續閱讀
[Angular Material 完全攻略]打造問卷頁面(7) - Slider

今天我們要介紹目前Angular Material裡面關於Form Control的最後一個元件-Slider;完成Slider的學習之後,問卷頁面也會在此告一段落,進入下一個畫面的設計,學習更多Angular Material相關的元件,就讓我們以比較輕鬆的腳步完成今天的課題吧!

繼續閱讀