[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，或是一个按下去会有其他行为的按钮等等。

图片来源：https://material.io/guidelines/components/lists.html#lists-specs

开始使用Angular Material的List元件

使用mat-list及mat-list-item

使用List元件前，我们必须加入MatListModule，之后可以使用及的组合来完成一个基本的List：

  问卷调查
  部落格
  收件夹

结果如下：

这是一个很单纯的清单资料，不过我们在SideNav中，希望是能够点选的Link，好在不仅仅是component，也能够以directive的方式呈现，因此我们稍微做点调整：

  问卷调查
  部落格
  收件夹

结果如下：

一个可以点选的List就出现啦！这裡可以注意到一件非常有趣的事情，当我们展开选单时，预设会focus在第一个项目，同时我们可以使用tab来切换，更棒的是使用tab切换时，不会切换到List之外的内容，只会在List之内循环，许多清单类型的Angular Material都具有这样的特性，让使用键盘操作时的情境可以更加灵活。

我们也能够在自己的component中做到这个特性，这在未来的Angular CDK篇时会再作介绍。

使用mat-nav-list

刚刚的例子我们已经在SideNav导览列中加入了选单，但是在导览列的选单连结中有底线有违我们一般的习惯，我们可以用CSS把它调整调，但Angular Material提供了更优质的做法，也就是另一个元件mat-nav-list，这个元件可以使用在导览用的list中，我们只要把原来的mat-list换掉即可

  问卷调查
  部落格
  收件夹

结果如下：

[图片上传中...(image-e5bea-1526906540248-5)]

可以看到不仅底线不见了，连focus的样式也变成灰底而不是系统预设的蓝色外框，我们一样能用tab在这些清单项目中切换，同时点下去还有涟漪的特效，操作爽度百分百！

使用matSubheader及mat-divider

当清单料很多时，我们可能会需要将资料分类显示，这时候我们可以使用matSubheader，替每组资料标上一个分类名称。

除此之外，我们也可以使用这个来分隔不同群组的资料。

  
示范用页面
  问卷调查
  部落格
  收件夹
  
  
  
其他页面
  首页
  Google
  Facebook

结果如下：

[图片上传中...(image-fd870a-1526906540247-4)]

可以看到matSubheader的内容会变成灰色的文字说明，而且也不会被tab选中。同时被分隔的两组选单之间也多了一条灰色的线，让分隔更加明确。

使用matLine让清单资料以多行方式显示

预设是一行文字，但当有需要的时候，我们也可以使用matLine来建立多行文字。

  
多行文字示范
  
    
床前明月光
    
疑是地上霜
  
  
    
参加ＩＴ铁人赛
    
功力增加一甲子
  

结果如下：

[图片上传中...(image-ad7b95-1526906540247-3)]

可以发现我们没有做任何设定，但第一行的文字就是会比较大点，因为第一行文字通常代表的是主要讯息，之后的文字则是以补充为主，因此会小一点点。

使用matListAvatar显示产生头像

在清单中使用头像是很常见的一种应用，像是许多通讯软体都会採用这种设计方式，要在清单中使用头像可以在头像加上matListAvatar：

好友讯息

  
  
志玲
  
hi，好久不见，最近好吗？


  
  
依晨
  
找时间吃个饭吧？

结果如下：

[图片上传中...(image-deaa61-1526906540247-2)]

在清单右方加上动作icon

在Material Design中的清单，所有的执行动作按钮预设都会放在最后方，因此在Angular Material中，只要加入按钮，都会直接被推到最后面：

  
  
志玲
  
hi，好久不见，最近好吗？
  
  chat


  
  chat
  
  
依晨
  
找时间吃个饭吧？

结果如下：

[图片上传中...(image-251d7a-1526906540247-1)]

可複选的mat-selection-list

在List中，还有一个比较複杂的component－及，可以让清单变成可複选的列表，并自动在清单列后方加上一个checkbox，在一些功能设定的页面非常好用。

  

    chat_bubble
    新讯息
  
  这是新消息
  这是广告消息

  
  

    settings
    讯息设定
  
  
    有新讯息时通知我
    显示广告讯息
  

成果如下：

[图片上传中...(image-fec9bb-1526906540247-0)]

更多和的API可以参考官方文件。

本日小结

今天我们把Angular Material的List功能整个玩过了一遍，并且为原来的SideNav填入了各式各样的List，List可是说是泛用性非常高的一个元件，因此把List学好，对于前端画面的设计绝对是有很大的加分效果。

明天我们在学习另一个元件－Ｍenu，来把上方的Toolbar也变得更加丰富吧！

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

分支：day-07-list

相关资源

• Material Design - Lists
• Angular Material - List
  ](http://upload-images.jianshu.io/upload_images/3802398-e2cf87bd6e24be0c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

開始使用Angular Material的List元件

使用mat-list及mat-list-item

使用List元件前，我們必須加入MatListModule，之後可以使用及的組合來完成一個基本的List：

  問卷調查
  部落格
  收件夾

結果如下：

簡單的SideNav

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

  問卷調查
  部落格
  收件夾

結果如下：

可連結的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

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

使用matSubheader及mat-divider

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

除此之外，我們也可以使用這個來分隔不同群組的資料。

  
示範用頁面
  問卷調查
  部落格
  收件夾
  
  
  
其他頁面
  首頁
  Google
  Facebook

結果如下：

使用mat-divider和matSubheader

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

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

預設是一行文字，但當有需要的時候，我們也可以使用matLine來建立多行文字。

  
多行文字示範
  
    
床前明月光
    
疑是地上霜
  
  
    
參加ＩＴ鐵人賽
    
功力增加一甲子
  

結果如下：

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

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

使用matListAvatar顯示產生頭像

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

好友訊息

  
  
志玲
  
hi，好久不見，最近好嗎？


  
  
依晨
  
找時間吃個飯吧？

結果如下：

matListAvatar

在清單右方加上動作icon

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

  
  
志玲
  
hi，好久不見，最近好嗎？
  
  chat


  
  chat
  
  
依晨
  
找時間吃個飯吧？

結果如下：

在mat-list-item中使用icon button

可複選的mat-selection-list

在List中，還有一個比較複雜的component－及，可以讓清單變成可複選的列表，並自動在清單列後方加上一個checkbox，在一些功能設定的頁面非常好用。

  

    chat_bubble
    新訊息
  
  這是新消息
  這是廣告消息

  
  

    settings
    訊息設定
  
  
    有新訊息時通知我
    顯示廣告訊息
  

成果如下：

可複選的List

更多和的API可以參考官方文件。

本日小結

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

明天我們在學習另一個元件－Ｍenu，來把上方的Toolbar也變得更加豐富吧！

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

分支：day-07-list

相關資源

• Material Design - Lists
• Angular Material - List