web-dev-qa-db-ja.com

Angular Material Tabボタンに画像を追加

私はAngularの初心者です。 Angular material tabで何かを実行しようとしました。タブセクションを画像に追加しましたが、その部分が機能していません。画像をangular素材タブ。私が達成しようとしていることを理解するには、添付の画像をご覧ください。

Need like this

これまでの私のコード（stackblitzデモ）

私のコード部分：

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
  <mat-tab label="First"  style="background:url('/assets/img/school-01.png')"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

css

.example-stretched-tabs {
  max-width: 800px;
}
/* active tab */
.mat-tab-list .mat-tab-labels .mat-tab-label-active {
  color:#0f2241;
  background-color: #535353;
  opacity: 1;
}

/* ink bar */
.mat-tab-group.mat-primary .mat-ink-bar {
  background: none;
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 10px; 
}

。ts

import {Component, ViewEncapsulation} from '@angular/core';

/**
 * @title Tab group with stretched labels
 */
@Component({
  selector: 'tab-group-stretched-example',
  templateUrl: 'tab-group-stretched-example.html',
  styleUrls: ['tab-group-stretched-example.css'],
  encapsulation: ViewEncapsulation.None
})
export class TabGroupStretchedExample {}
angulartabsangular-materialangular6
10
core114

Angular docs によると：

より複雑なラベルの場合は、mat-tab内にmat-tab-labelディレクティブを含むテンプレートを追加します。

だからあなたはあなたの<img>またはテンプレートに含めるものは何でも<ng-template mat-tab-label/>。

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            <img src="...">
            <span>foo</span>
        </ng-template>
    </mat-tab>
    <mat-tab>
        ....
    </mat-tab>
</mat-tab-group>
20
L. Guthardt

マットアイコンを使用して、次のような画像をタブに表示できます。

<mat-tabs>
  <mat-tab>
    <mat-tab-label>
      <mat-icon mat-svg-icon="img/icons/icon.svg"></mat-icon>
    </mat-tab-label>
    <mat-tab-body>
      Lorem
    </mat-tab-body>
  </mat-tab>
</mat-tabs>
0
Ritesh