iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 18
2
Modern Web

Angular Material完全攻略系列 第 18

[Angular Material完全攻略] Day 18 - 設計一個部落格(3) - Progress Bar、Progress Spinner

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

關於Material Design中的Progress Bar和Progress Spinner

Progress Bar和Progress Spinner被歸納在Material Design的Progress & activity設計指南中,主要是用來提示使用者內容正在讀取中,依照顯示的位置不同,可以使用長條的顯示(Progress Bar)、或是圓形的顯示(Progress Spinner),適合使用在讀取(或重新整理)新的資料時,告知使用者內容正在讀取中;依照使用情境不同,我們也能選擇讓使用者知道目前確定的進度(Determinate indicators),或是顯示不確定的進度(Indeterminate indicators)。

Material Progress

圖片來源:https://material.io/guidelines/components/progress-activity.html

##開始使用Angular Material的Progress Bar

讓我們先從Progress Bar開始學習起,依照古老(也就是前10多篇)的慣例,我們可以在加入MatProgressBarModule後,開始使用Progress Bar的相關功能。

使用mat-progress-bar

我們在原來的部落格邊欄部分,放一個簡單的Progress Bar看看,只需要加入<mat-progress-bar>就好

<mat-grid-tile rowspan="22">
  ...
  <div class="blog-sidebard-content">
    <h4>
      發文進度
    </h4>
    <mat-progress-bar></mat-progress-bar>
  </div>
</mat-grid-tile>

另外我們加了一個小樣式,讓資料呈現比較清楚

.blog-sidebard-content {
  align-self: flex-start;
  padding-top: 100px;
  width: 95%;
}

結果如下:

Basic Progress Bar

一個超基本的Progress Bar就完成啦!接著我們把進度填進去吧。

要顯示進度,只需要設定value屬性即可,這裡我們沒有minmax等屬性可以設定,預設就是0~100,低於或超過都不會影響呈現的變化:

<mat-progress-bar value="60"></mat-progress-bar>

使用value="60"或是[value]="60"都可以,字串或數字對結果不會有影響,結果如下:

Progress Bar With Value

進度就明顯的顯示上去囉,例外一個有趣的是,當數字在變化時,還能夠看到動畫的效果!

<mat-progress-bar [value]="progress"></mat-progress-bar>
<button mat-raised-button (click)="progress = progress - 10">-10</button>
<button mat-raised-button (click)="progress = progress + 10">+10</button>  

成果如下:

Animated Progress Bar

很生動吧!

調整mat-progress-bar的模式

<mat-progress-bar>有一個屬性mode,具有4種模式,分別代表不同的顯示方式:

  • determinate:預設值,會依照value屬性決定進度

  • buffer:除了原來的value以外還可以設定bufferValue屬性,會在valuebufferValue之間多一塊緩衝區,而空白的部分則會變成另一種效果的顯示方式

    <h4>Buffer Progress Bar</h4>
    <mat-progress-bar mode="buffer" value="30" bufferValue="60"></mat-progress-bar>   
    

    成果:

    Buffered Progress Bar

  • indeterminate:代表不確定的進度,valuebufferValue屬性都不能使用,當需要使用者進行等待的時候適用。

    <h4>indeterminate Progress Bar</h4>
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    

    成果:

    Indeterminate Progress Bar

  • query:跟indeterminate一樣,但進度的方向剛好相反,適合在loading之前的前置準備時使用,要進入loading時再調整成indeterminate

    <h4>Query Progress Bar</h4>
    <mat-progress-bar mode="query"></mat-progress-bar>
    

    成果:

    Query Progress Bar

調整Progress Bar的顏色

一樣還是老規則,只需要設定colorprimaryaccentwarn即可切換顏色。

<h4>Primary</h4>
<mat-progress-bar mode="buffer" color="primary"></mat-progress-bar>

<h4>Accent</h4>
<mat-progress-bar mode="buffer" color="accent"></mat-progress-bar>

<h4>Warn</h4>
<mat-progress-bar mode="buffer" color="warn"></mat-progress-bar>

結果如下:

Colored Progress Bar

應用

由於是扁長型的顯示方式,因此放在一些獨立顯示的元件如Card下可以說是非常適合:

<mat-card class="post-tile" [tabindex]="index">
  ...
  <mat-card-footer>
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  </mat-card-footer>
</mat-card>

成果如下:

Progress Bar in Card footer

當某個按鈕按下去,直接在卡片下方顯示loading狀態,看起來完全沒有違和感啊!

開始使用Angular Material的Progress Spinner

Progress Spinner基本上概念跟Progress Bar大同小異,只是從直條顯示變成圓形而已,加入MatProgressSpinnerModule後,直接使用<mat-progress-spinner>即可:

<h4>Progress Spinner</h4>
<mat-progress-spinner [value]="progress"></mat-progress-spinner>
<button mat-raised-button (click)="progress = progress - 10">-10</button>
<button mat-raised-button (click)="progress = progress + 10">+10</button>

結果:

Spinner Basic

很簡單吧!

設定mat-progress-spinner的模式

<mat-progress-spinner>mode只有兩個:

  • determinate:預設值,會透過value決定進度顯示。

  • indeterminate:代表進度不確定,會忽略value的設定。

    <h4>Indeterminate Progress Spinner</h4>
    <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
    

    成果:

    Indeterminate Progress Spinner

設定mat-progress-spinner的線條粗細

<mat-progress-spinner>還有一個strokeWidth屬性,我們可以透過這個屬性來調整它的線條寬度

<h4>Spinner Stroke Width</h4>
<mat-progress-spinner value="60" [strokeWidth]="strokeWidth"></mat-progress-spinner>
<button mat-raised-button (click)="strokeWidth = strokeWidth - 1">-1</button>
{{ strokeWidth }}
<button mat-raised-button (click)="strokeWidth = strokeWidth + 1">+1</button>  

成果如下:

Progress Spinner Stroke Width

設定mat-progress-spinner的直徑大小

除了線條寬度以外,透過diameter屬性,我們也能調整圓圈的直徑大小:

<h4>Spinner Stroke Width</h4>
<mat-progress-spinner value="60" [diameter]="diameter"></mat-progress-spinner>
<button mat-raised-button (click)="diameter = diameter - 10">-10</button>
{{ diameter }}
<button mat-raised-button (click)="diameter = diameter + 10">+10</button>

成果如下:

Progress Spinner Diameter

使用mat-spinner

因為indeterminate模式在spinner實在太常用了,因此還有了一個<mat-spinner>可以使用;<mat-spinner>可以想像成是<mat-progress-spinner mode="indeterminate">的縮寫,因此不能額外設定modevalue,不過strokeWidthdiameter依然也都可以設定:

<h4>Very Small Spinner</h4>
<mat-spinner [strokeWidth]="1" [diameter]="30"></mat-spinner>

成果如下:

mat-spinner

應用

Progress Spinner由於體積較大的關係,通常會放置在預期會有內容,但目前還沒有內容的地方,等到內容產生後再將其隱藏,例如我們可以在部落格文章讀取完之前,先放上一個Progress Spinner

<ng-template #loading>
  <mat-grid-tile colspan="2">
    <mat-spinner></mat-spinner>
  </mat-grid-tile>
</ng-template>

<ng-container *ngIf="posts$ | async as posts; else loading">
  <mat-grid-tile *ngFor="let post of posts; let index = index" rowspan="6">
    ...
  </mat-grid-tile>
</ng-container>

結果如下:

Loading content

看起來就變得清楚多啦!

本日小結

在SPA架構下,loading的功能可以說是非常的重要,透過Progress Bar和Progress Spinner,我們可以用很明確的方式讓使用者知道目前的進度狀態。

Progress Bar可以附加在別元件區塊的上下方,讓我們知道這個元件目前的狀態是在讀取中。同時它也有著多采多姿的顯示模式。

Progress Spinner顯示的模式相對單純,但對於資料顯示前的空白時間可以說是最重要的一個元件,沒有這個元件,在讀取資料到畫面上前,只會是一片的空白,光想就覺得可怕啊!

把這兩個元件學好,遇到需要顯示loading狀況時就不怕沒有武器可以應對囉。

本日的程式碼GitHub:https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-18-progress-bar-progress-spinner

分支:day-18-progress-bar-progress-spinner

相關資源


上一篇
[Angular Material完全攻略] Day 17 - 設計一個部落格(2) - Card
下一篇
[Angular Material完全攻略] Day - 19 - 設計一個部落格(4) - Dialog
系列文
Angular Material完全攻略34

尚未有邦友留言

立即登入留言