[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，之后可以使用<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中，希望是能够点选的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就出现啦！这裡可以注意到一件非常有趣的事情，当我们展开选单时，预设会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>

结果如下：

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

可以看到不仅底线不见了，连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>

结果如下：

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

可以看到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>参加ＩＴ铁人赛</p>
    <p matLine>功力增加一甲子</p>
  </mat-list-item></mat-nav-list>

结果如下：

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

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

使用matListAvatar显示产生头像

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

<h3 matSubheader>好友讯息</h3><mat-list-item>
  <img matListAvatar class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <p matLine>志玲</p>
  <p matLine>hi，好久不见，最近好吗？</p></mat-list-item><mat-list-item>
  <img matListAvatar class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <p matLine>依晨</p>
  <p matLine>找时间吃个饭吧？</p></mat-list-item>

结果如下：

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

在清单右方加上动作icon

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

<mat-list-item>
  <img matListAvatar class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <p matLine>依晨</p>
  <p matLine>找时间吃个饭吧？</p></mat-list-item>

结果如下：

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

可複选的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>

成果如下：

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

更多<mat-selection-list>和<mat-list-option>的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，之後可以使用<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>參加ＩＴ鐵人賽</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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <p matLine>志玲</p>
  <p matLine>hi，好久不見，最近好嗎？</p></mat-list-item><mat-list-item>
  <img matListAvatar class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <p matLine>依晨</p>
  <p matLine>找時間吃個飯吧？</p></mat-list-item>

結果如下：

matListAvatar

在清單右方加上動作icon

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

<mat-list-item>
  <img matListAvatar class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="..." />
  <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學好，對於前端畫面的設計絕對是有很大的加分效果。

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

作者：readilen
链接：https://www.jianshu.com/p/686943e93e90