[Angular Material完全攻略] Day 07 - 打造基本后臺(tái)(3) - List

轉(zhuǎn)載
昨天我們把整個(gè)后臺(tái)系統(tǒng)的架構(gòu)基本上完成了，今天我們要來學(xué)習(xí)使用Angular Material的List元件，來填滿SideNav。List元件功能非常強(qiáng)大，而且也是個(gè)在任何地方都很有可能會(huì)用到的功能，善用List可以產(chǎn)生各種不同的變化來滿足各種需求，Let's GO！

關(guān)于Material Design中的List

在Material Design的List設(shè)計(jì)指南中，List是在一欄中呈現(xiàn)多個(gè)資料列，每一列就是一組資料，在資料列中我們能夠清楚的呈現(xiàn)相關(guān)的資訊，如果有需要，也能夠?qū)@些資訊進(jìn)行一些額外的操作。

一個(gè)資料列基本上會(huì)包含3種資料，非必要但可以參考：

  1. Avatar：可以是一個(gè)頭像或是Icon，用來做為這筆資料的基本代表；在畫面上我們應(yīng)該能從這裡立即得了解資訊的大致含義。
  2. 內(nèi)容：主要的文字內(nèi)容，通常是單行文字，必要的時(shí)候多行文字也沒有問題，只要畫面能清楚呈現(xiàn)即可。
  3. 行動(dòng) or 資訊：代表資料的補(bǔ)充訊息，可能是個(gè)警告的icon，或是一個(gè)按下去會(huì)有其他行為的按鈕等等。

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

開始使用Angular Material的List元件

使用mat-list及mat-list-item

使用List元件前，我們必須加入MatListModule，之后可以使用<mat-list>及<mat-list-item>的組合來完成一個(gè)基本的List：

<mat-list>
  <mat-list-item>問卷調(diào)查</mat-list-item>
  <mat-list-item>部落格</mat-list-item>
  <mat-list-item>收件夾</mat-list-item>
</mat-list>

結(jié)果如下：

這是一個(gè)很單純的清單資料，不過我們?cè)赟ideNav中，希望是能夠點(diǎn)選的Link，好在<mat-list-item>不僅僅是component，也能夠以directive的方式呈現(xiàn)，因此我們稍微做點(diǎn)調(diào)整：

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

結(jié)果如下：

一個(gè)可以點(diǎn)選的List就出現(xiàn)啦！這裡可以注意到一件非常有趣的事情，當(dāng)我們展開選單時(shí)，預(yù)設(shè)會(huì)focus在第一個(gè)項(xiàng)目，同時(shí)我們可以使用tab來切換，更棒的是使用tab切換時(shí)，不會(huì)切換到List之外的內(nèi)容，只會(huì)在List之內(nèi)循環(huán)，許多清單類型的Angular Material都具有這樣的特性，讓使用鍵盤操作時(shí)的情境可以更加靈活。

我們也能夠在自己的component中做到這個(gè)特性，這在未來的Angular CDK篇時(shí)會(huì)再作介紹。

使用mat-nav-list

剛剛的例子我們已經(jīng)在SideNav導(dǎo)覽列中加入了選單，但是在導(dǎo)覽列的選單連結(jié)中有底線有違我們一般的習(xí)慣，我們可以用CSS把它調(diào)整調(diào)，但Angular Material提供了更優(yōu)質(zhì)的做法，也就是另一個(gè)元件mat-nav-list，這個(gè)元件可以使用在導(dǎo)覽用的list中，我們只要把原來的mat-list換掉即可

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

結(jié)果如下：

[圖片上傳中...(image-e5bea-1526906540248-5)]

可以看到不僅底線不見了，連focus的樣式也變成灰底而不是系統(tǒng)預(yù)設(shè)的藍(lán)色外框，我們一樣能用tab在這些清單項(xiàng)目中切換，同時(shí)點(diǎn)下去還有漣漪的特效，操作爽度百分百！

使用matSubheader及mat-divider

當(dāng)清單料很多時(shí)，我們可能會(huì)需要將資料分類顯示，這時(shí)候我們可以使用matSubheader，替每組資料標(biāo)上一個(gè)分類名稱。

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

<mat-nav-list>
  <h3 matSubheader>示范用頁面</h3>
  <a [routerLink]="['/', 'dashboard', 'survey']" mat-list-item>問卷調(diào)查</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>

結(jié)果如下：

[圖片上傳中...(image-fd870a-1526906540247-4)]

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

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

<mat-list-item>預(yù)設(shè)是一行文字，但當(dāng)有需要的時(shí)候，我們也可以使用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>

結(jié)果如下：

[圖片上傳中...(image-ad7b95-1526906540247-3)]

可以發(fā)現(xiàn)我們沒有做任何設(shè)定，但第一行的文字就是會(huì)比較大點(diǎn)，因?yàn)榈谝恍形淖滞ǔ４淼氖侵饕嵪?，之后的文字則是以補(bǔ)充為主，因此會(huì)小一點(diǎn)點(diǎn)。

使用matListAvatar顯示產(chǎn)生頭像

在清單中使用頭像是很常見的一種應(yīng)用，像是許多通訊軟體都會(huì)採用這種設(shè)計(jì)方式，要在清單中使用頭像可以在頭像加上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>找時(shí)間吃個(gè)飯吧？</p>
</mat-list-item>

結(jié)果如下：

[圖片上傳中...(image-deaa61-1526906540247-2)]

在清單右方加上動(dòng)作icon

在Material Design中的清單，所有的執(zhí)行動(dòng)作按鈕預(yù)設(shè)都會(huì)放在最后方，因此在Angular Material中，只要加入按鈕，都會(huì)直接被推到最后面：

<mat-list-item>
  <img matListAvatar src="..." />
  <p matLine>志玲</p>
  <p matLine>hi，好久不見，最近好嗎？</p>
  <!-- button會(huì)自動(dòng)被推到最后面 -->
  <button mat-icon-button><mat-icon>chat</mat-icon></button>
</mat-list-item>
<mat-list-item>
  <!-- 即使icon button放在前面，還是會(huì)被往后推 -->
  <button mat-icon-button><mat-icon>chat</mat-icon></button>
  <img matListAvatar src="..." />
  <p matLine>依晨</p>
  <p matLine>找時(shí)間吃個(gè)飯吧？</p>
</mat-list-item>

結(jié)果如下：

[圖片上傳中...(image-251d7a-1526906540247-1)]

可複選的mat-selection-list

在List中，還有一個(gè)比較複雜的component－<mat-selection-list>及<mat-list-option>，可以讓清單變成可複選的列表，并自動(dòng)在清單列后方加上一個(gè)checkbox，在一些功能設(shè)定的頁面非常好用。

<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>
    訊息設(shè)定
  </h3>
  <mat-selection-list>
    <mat-list-option [value]="1" selected="true" #optNew>有新訊息時(shí)通知我</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可以參考官方文件。

本日小結(jié)

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

明天我們?cè)趯W(xué)習(xí)另一個(gè)元件－Ｍenu，來把上方的Toolbar也變得更加豐富吧！

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

分支：day-07-list

相關(guān)資源

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

開始使用Angular Material的List元件

使用mat-list及mat-list-item

使用List元件前，我們必須加入MatListModule，之後可以使用<mat-list>及<mat-list-item>的組合來完成一個(gè)基本的List：

<mat-list>
  <mat-list-item>問卷調(diào)查</mat-list-item>
  <mat-list-item>部落格</mat-list-item>
  <mat-list-item>收件夾</mat-list-item>
</mat-list>

結(jié)果如下：

簡單的SideNav

這是一個(gè)很單純的清單資料，不過我們?cè)赟ideNav中，希望是能夠點(diǎn)選的Link，好在<mat-list-item>不僅僅是component，也能夠以directive的方式呈現(xiàn)，因此我們稍微做點(diǎn)調(diào)整：

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

結(jié)果如下：

可連結(jié)的List

一個(gè)可以點(diǎn)選的List就出現(xiàn)啦！這裡可以注意到一件非常有趣的事情，當(dāng)我們展開選單時(shí)，預(yù)設(shè)會(huì)focus在第一個(gè)項(xiàng)目，同時(shí)我們可以使用tab來切換，更棒的是使用tab切換時(shí)，不會(huì)切換到List之外的內(nèi)容，只會(huì)在List之內(nèi)循環(huán)，許多清單類型的Angular Material都具有這樣的特性，讓使用鍵盤操作時(shí)的情境可以更加靈活。

我們也能夠在自己的component中做到這個(gè)特性，這在未來的Angular CDK篇時(shí)會(huì)再作介紹。

使用mat-nav-list

剛剛的例子我們已經(jīng)在SideNav導(dǎo)覽列中加入了選單，但是在導(dǎo)覽列的選單連結(jié)中有底線有違我們一般的習(xí)慣，我們可以用CSS把它調(diào)整調(diào)，但Angular Material提供了更優(yōu)質(zhì)的做法，也就是另一個(gè)元件mat-nav-list，這個(gè)元件可以使用在導(dǎo)覽用的list中，我們只要把原來的mat-list換掉即可

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

結(jié)果如下：

使用mat-nav-list

可以看到不僅底線不見了，連focus的樣式也變成灰底而不是系統(tǒng)預(yù)設(shè)的藍(lán)色外框，我們一樣能用tab在這些清單項(xiàng)目中切換，同時(shí)點(diǎn)下去還有漣漪的特效，操作爽度百分百！

使用matSubheader及mat-divider

當(dāng)清單料很多時(shí)，我們可能會(huì)需要將資料分類顯示，這時(shí)候我們可以使用matSubheader，替每組資料標(biāo)上一個(gè)分類名稱。

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

<mat-nav-list>
  <h3 matSubheader>示範(fàn)用頁面</h3>
  <a [routerLink]="['/', 'dashboard', 'survey']" mat-list-item>問卷調(diào)查</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>

結(jié)果如下：

使用mat-divider和matSubheader

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

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

<mat-list-item>預(yù)設(shè)是一行文字，但當(dāng)有需要的時(shí)候，我們也可以使用matLine來建立多行文字。

<mat-nav-list>
  <h3 matSubheader>多行文字示範(fàn)</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>

結(jié)果如下：

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

可以發(fā)現(xiàn)我們沒有做任何設(shè)定，但第一行的文字就是會(huì)比較大點(diǎn)，因?yàn)榈谝恍形淖滞ǔ４淼氖侵饕嵪?，之後的文字則是以補(bǔ)充為主，因此會(huì)小一點(diǎn)點(diǎn)。

使用matListAvatar顯示產(chǎn)生頭像

在清單中使用頭像是很常見的一種應(yīng)用，像是許多通訊軟體都會(huì)採用這種設(shè)計(jì)方式，要在清單中使用頭像可以在頭像加上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>找時(shí)間吃個(gè)飯吧？</p>
</mat-list-item>

結(jié)果如下：

matListAvatar

在清單右方加上動(dòng)作icon

在Material Design中的清單，所有的執(zhí)行動(dòng)作按鈕預(yù)設(shè)都會(huì)放在最後方，因此在Angular Material中，只要加入按鈕，都會(huì)直接被推到最後面：

<mat-list-item>
  <img matListAvatar src="..." />
  <p matLine>志玲</p>
  <p matLine>hi，好久不見，最近好嗎？</p>
  <!-- button會(huì)自動(dòng)被推到最後面 -->
  <button mat-icon-button><mat-icon>chat</mat-icon></button>
</mat-list-item>
<mat-list-item>
  <!-- 即使icon button放在前面，還是會(huì)被往後推 -->
  <button mat-icon-button><mat-icon>chat</mat-icon></button>
  <img matListAvatar src="..." />
  <p matLine>依晨</p>
  <p matLine>找時(shí)間吃個(gè)飯吧？</p>
</mat-list-item>

結(jié)果如下：

在mat-list-item中使用icon button

可複選的mat-selection-list

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

<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>
    訊息設(shè)定
  </h3>
  <mat-selection-list>
    <mat-list-option [value]="1" selected="true" #optNew>有新訊息時(shí)通知我</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可以參考官方文件。

本日小結(jié)

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

明天我們?cè)趯W(xué)習(xí)另一個(gè)元件－Ｍenu，來把上方的Toolbar也變得更加豐富吧！

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

分支：day-07-list

相關(guān)資源

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容