[英]Angular Material Tab add image to button
我是Angular的初學者。 我嘗試用Angular材料選項卡做一些事情。 我將標簽部分添加到圖像,但該部分無效。 有誰知道如何將圖像添加到角度材料選項卡。 請查看我的附圖,了解我嘗試實現的目標。
我的代碼部分:
<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 {}
根據Angular文檔 :
對於更復雜的標簽,請在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>
您可以使用mat-icons在選項卡中顯示圖像,如下所示:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.