Angular Material Tabs（10分で作成）

タブの使用法

Angular Material Tabsは、
コンテンツを個別に表示します。
変更するファイルは、
cmaterial.module.tsと、
app.component.htmlだけです。
cmaterial.module.tsファイルは、
MatTabsModuleを追加インポートします。
下記がコードになります。

  
import { NgModule } from "@angular/core";
//追加
import {MatTabsModule} from '@angular/material/tabs';

@NgModule({
 exports:[ 
 //追加
          MatTabsModule                 
         ]
})
export class CmaterialModule{}  
  

次は app.componet.htmlです。
app.componet.htmlファイルでは、
mat-tabタグを使います。
使用法の原型は下記の様になります。

    
<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
 

原型のContent部分には、
色々な内容を記入して使います。
下記では、簡単なストーリを入れています。

  
  <mat-tab-group mat-align-tabs="start">
    <mat-tab label="First">
        <p>
         朝、目が覚めたら、何か良いことがありそうな気がしました。<br/>
         滅多にないことです。<br/>
         急いで服を着て、朝食を済ませました。<br/>
         早く大学に行きたいと思ったのです。<br/>　　　　　
        </p>
    </mat-tab>
    <mat-tab label="Second">
        <p>
         大学に行き、自分の研究室に入りました。<br/>
         パソコンのスイッチを入れ、<br/>
         そしてメールを確認しました。<br/>  　　　　 　　　
        </p>
    </mat-tab>
    <mat-tab label="Third">
        <p>
         そこには、<br/>   
         新型コロナウイルスの、<br/>
         ワクチンが完成したという知らせが、<br/>
         ありました。<br/>
        </p>        
    </mat-tab>
  </mat-tab-group>  
  

今回は以上です。