今天來在圖示按鈕上加入提示文字，並在昨天實作的彈跳視窗中加入頁籤的實作。

Tooltip

在應用程式的操作中，我們有時會把一些補充的文字放在提示文字中，讓使用者可以在游標移入時看到更多資訊。在 MatTooltipModule 模組的引用後，我們就可以在按鈕上加入 matTooltip 指令元件。

<button
  mat-icon-button
  color="accent"
  matTooltip="查詢明細"
  (click)="view.emit(row)"
>
  <mat-icon>search</mat-icon>
</button>

在預設的情況下，這個提示文字會顯示在下方，透過 matTooltipPosition 屬性就可以設定顯示的位置，其值包含了上 (above)、下 (below)、左 (before)、右 (after) 四種。另外，matTooltipHideDelay 與 matTooltipShowDelay 兩個屬性用來設定提示文字需求多少毫秒數來隱藏與顯示。當我們希望在特定時候不顯示提示文字，則設定 matTooltipDisabled 為 true 即可。

export const customTooltipOptions: MatTooltipDefaultOptions = {
  showDelay: 1000,
  hideDelay: 1000,
  touchendHideDelay: 1000,
};

另外，在顯示與隱藏的時間上，我們也可以實作 MatTooltipDefaultOptions 介面的類別，或是宣告此介面的變數，並利用提供者的抽換來設定。

{ provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: customTooltipOptions },

Tabs

接著，引用 MatTabsModule 模組來在彈跳視窗中加入頁籤。如下面程式，基本上透過 <mat-tab-group> 標籤來定義頁籤的區域，而每一個頁籤則會使用 <mat-tab> 頁籤來定義。

<mat-tab-group>
  <mat-tab label="基本資料"></mat-tab>
  <mat-tab label="工作內容"></mat-tab>
  <mat-tab label="工作記錄"></mat-tab>
</mat-tab-group>

在 <mat-tab-group> 裡有提供 headerPosition 屬性來設定頁籤放置在上邊 (above) 或是下邊 (below) 。而在於頁籤標題上，可以設定 fitInkBarToContent 屬性來決定標題下方的顯示長度是否要與標題內容一樣。mat-stretch-tabs 屬性則決定所有的頁籤標題是否要完整填充標題列。

當 mat-stretch-tabs 設為 false 時，就可以利用 mat-align-tabs 來決定頁籤標題列的水平位置。

有時候我們會希望知道使用者切換到哪個頁籤，或是一開始顯示其他頁籤的需求。此時可以雙向繫結 selectedIndex 屬性來實作。

然後，搭配著 <ng-template> 與 mat-tab-label 可以讓標題更加豐富。而在內容區域則可以使用 matTabContent 指令元件來實作延遲載入。

<mat-tab>
  <ng-template mat-tab-label>
    <mat-icon>description</mat-icon>
    基本資料
  </ng-template>
</mat-tab>

最後，除了一般的頁籤外，Angular Material 的 Tabs 也有提供連結型的頁籤。此時會使用 mat-tab-nav-bar 指令元件來實作，並利用 tabPanel 屬性來決定內容要顯示的區塊；而每一個頁籤連結則透過 mat-tab-link 定義。

<nav mat-tab-nav-bar [tabPanel]="tabPanel">
  <a mat-tab-link
    (click)="activeLink = link"
    [active]="activeLink == link">
    第一頁
  </a>
    <a mat-tab-link
      (click)="activeLink = link"
      [active]="activeLink == link">
      第二頁
    </a>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>

今日範例

• Stackblitz

接下來

接下來，明天我們來透過 Angular Material 的表單來實作工作事項的新增作業。