iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
1
Modern Web

Angular Material完全攻略系列 第 7

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

昨天我們把整個後台系統的架構基本上完成了,今天我們要來學習使用Angular Material的List元件,來填滿SideNav。List元件功能非常強大,而且也是個在任何地方都很有可能會用到的功能,善用List可以產生各種不同的變化來滿足各種需求,Let's GO!

關於Material Design中的List

Material Design的List設計指南中,List是在一欄中呈現多個資料列,每一列就是一組資料,在資料列中我們能夠清楚的呈現相關的資訊,如果有需要,也能夠對這些資訊進行一些額外的操作。

一個資料列基本上會包含3種資料,非必要但可以參考:

  1. Avatar:可以是一個頭像或是Icon,用來做為這筆資料的基本代表;在畫面上我們應該能從這裡立即得了解資訊的大致含義。
  2. 內容:主要的文字內容,通常是單行文字,必要的時候多行文字也沒有問題,只要畫面能清楚呈現即可。
  3. 行動 or 資訊:代表資料的補充訊息,可能是個警告的icon,或是一個按下去會有其他行為的按鈕等等。

Material Design - List

圖片來源:https://material.io/guidelines/components/lists.html#lists-specs

開始使用Angular Material的List元件

使用mat-list及mat-list-item

使用List元件前,我們必須加入MatListModule,之後可以使用<mat-list><mat-list-item>的組合來完成一個基本的List:

<mat-list>
  <mat-list-item>問卷調查</mat-list-item>
  <mat-list-item>部落格</mat-list-item>
  <mat-list-item>收件夾</mat-list-item>
</mat-list>

結果如下:

簡單的SideNav

這是一個很單純的清單資料,不過我們在SideNav中,希望是能夠點選的Link,好在<mat-list-item>不僅僅是component,也能夠以directive的方式呈現,因此我們稍微做點調整:

<mat-list>
  <a [routerLink]="['/', 'dashboard', 'survey']" mat-list-item>問卷調查</a>
  <a [routerLink]="['/', 'dashboard', 'blog']" mat-list-item>部落格</a>
  <a [routerLink]="['/', 'dashboard', 'inbox']" mat-list-item>收件夾</a>
</mat-list>

結果如下:

可連結的List

一個可以點選的List就出現啦!這裡可以注意到一件非常有趣的事情,當我們展開選單時,預設會focus在第一個項目,同時我們可以使用tab來切換,更棒的是使用tab切換時,不會切換到List之外的內容,只會在List之內循環,許多清單類型的Angular Material都具有這樣的特性,讓使用鍵盤操作時的情境可以更加靈活。

我們也能夠在自己的component中做到這個特性,這在未來的Angular CDK篇時會再作介紹。

使用mat-nav-list

剛剛的例子我們已經在SideNav導覽列中加入了選單,但是在導覽列的選單連結中有底線有違我們一般的習慣,我們可以用CSS把它調整調,但Angular Material提供了更優質的做法,也就是另一個元件mat-nav-list,這個元件可以使用在導覽用的list中,我們只要把原來的mat-list換掉即可

<mat-nav-list>
  <a [routerLink]="['/', 'dashboard', 'survey']" mat-list-item>問卷調查</a>
  <a [routerLink]="['/', 'dashboard', 'blog']" mat-list-item>部落格</a>
  <a [routerLink]="['/', 'dashboard', 'inbox']" mat-list-item>收件夾</a>
</mat-nav-list>

結果如下:

使用mat-nav-list

可以看到不僅底線不見了,連focus的樣式也變成灰底而不是系統預設的藍色外框,我們一樣能用tab在這些清單項目中切換,同時點下去還有漣漪的特效,操作爽度百分百!

使用matSubheader及mat-divider

當清單料很多時,我們可能會需要將資料分類顯示,這時候我們可以使用matSubheader,替每組資料標上一個分類名稱。

除此之外,我們也可以使用<mat-divider>這個來分隔不同群組的資料。

<mat-nav-list>
  <h3 matSubheader>示範用頁面</h3>
  <a [routerLink]="['/', 'dashboard', 'survey']" mat-list-item>問卷調查</a>
  <a [routerLink]="['/', 'dashboard', 'blog']" mat-list-item>部落格</a>
  <a [routerLink]="['/', 'dashboard', 'inbox']" mat-list-item>收件夾</a>
  <mat-divider></mat-divider>
  <!-- 另外一組選單 -->
  <h3 matSubheader>其他頁面</h3>
  <a [routerLink]="['/']" mat-list-item>首頁</a>
  <a [routerLink]="['/']" mat-list-item>Google</a>
  <a [routerLink]="['/']" mat-list-item>Facebook</a>
</mat-nav-list>

結果如下:

使用mat-divider和matSubheader

可以看到matSubheader的內容會變成灰色的文字說明,而且也不會被tab選中。同時被<mat-divider>分隔的兩組選單之間也多了一條灰色的線,讓分隔更加明確。

使用matLine讓清單資料以多行方式顯示

<mat-list-item>預設是一行文字,但當有需要的時候,我們也可以使用matLine來建立多行文字。

<mat-nav-list>
  <h3 matSubheader>多行文字示範</h3>
  <mat-list-item>
    <p matLine>床前明月光</p>
    <p matLine>疑是地上霜</p>
  </mat-list-item>
  <mat-list-item>
    <p matLine>參加IT鐵人賽</p>
    <p matLine>功力增加一甲子</p>
  </mat-list-item>
</mat-nav-list>

結果如下:

使用mat-line建立多行mat-list-item

可以發現我們沒有做任何設定,但第一行的文字就是會比較大點,因為第一行文字通常代表的是主要訊息,之後的文字則是以補充為主,因此會小一點點。

使用matListAvatar顯示產生頭像

在清單中使用頭像是很常見的一種應用,像是許多通訊軟體都會採用這種設計方式,要在清單中使用頭像可以在頭像加上matListAvatar

<h3 matSubheader>好友訊息</h3>
<mat-list-item>
  <img matListAvatar src="..." />
  <p matLine>志玲</p>
  <p matLine>hi,好久不見,最近好嗎?</p>
</mat-list-item>
<mat-list-item>
  <img matListAvatar src="..." />
  <p matLine>依晨</p>
  <p matLine>找時間吃個飯吧?</p>
</mat-list-item>

結果如下:

matListAvatar

在清單右方加上動作icon

在Material Design中的清單,所有的執行動作按鈕預設都會放在最後方,因此在Angular Material中,只要加入按鈕,都會直接被推到最後面:

<mat-list-item>
  <img matListAvatar src="..." />
  <p matLine>志玲</p>
  <p matLine>hi,好久不見,最近好嗎?</p>
  <!-- button會自動被推到最後面 -->
  <button mat-icon-button><mat-icon>chat</mat-icon></button>
</mat-list-item>
<mat-list-item>
  <!-- 即使icon button放在前面,還是會被往後推 -->
  <button mat-icon-button><mat-icon>chat</mat-icon></button>
  <img matListAvatar src="..." />
  <p matLine>依晨</p>
  <p matLine>找時間吃個飯吧?</p>
</mat-list-item>

結果如下:

在mat-list-item中使用icon button

可複選的mat-selection-list

在List中,還有一個比較複雜的component-<mat-selection-list><mat-list-option>,可以讓清單變成可複選的列表,並自動在清單列後方加上一個checkbox,在一些功能設定的頁面非常好用。

<mat-nav-list>
  <h3 matSubheader>
    <mat-icon>chat_bubble</mat-icon>
    新訊息
  </h3>
  <mat-list-item *ngIf="optNew.selected">這是新消息</mat-list-item>
  <mat-list-item *ngIf="optAds.selected">這是廣告消息</mat-list-item>

  <mat-divider></mat-divider>
  <h3 matSubheader>
    <mat-icon>settings</mat-icon>
    訊息設定
  </h3>
  <mat-selection-list>
    <mat-list-option [value]="1" selected="true" #optNew>有新訊息時通知我</mat-list-option>
    <mat-list-option [value]="2" #optAds>顯示廣告訊息</mat-list-option>
  </mat-selection-list>
</mat-nav-list>

成果如下:

可複選的List

更多<mat-selection-list><mat-list-option>的API可以參考官方文件

本日小結

今天我們把Angular Material的List功能整個玩過了一遍,並且為原來的SideNav填入了各式各樣的List,List可是說是泛用性非常高的一個元件,因此把List學好,對於前端畫面的設計絕對是有很大的加分效果。

明天我們在學習另一個元件-Menu,來把上方的Toolbar也變得更加豐富吧!

本日的程式碼GitHub:https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-07-list

分支:day-07-list

相關資源


上一篇
[Angular Material完全攻略] Day 06 - 打造基本後台(2) - Toolbar
下一篇
[Angular Material完全攻略] Day 08 - 打造基本後台(4) - Menu
系列文
Angular Material完全攻略34

1 則留言

0
connie107
iT邦新手 5 級 ‧ 2017-12-26 10:50:34

很生動的sidebar

這樣感覺會比較有趣XD

/images/emoticon/emoticon07.gif

我要留言

立即登入留言