[英]Angular Material tabs adding custom icon/image before tab title
I have some tabs using Angular Material. 我有一些使用Angular Material的选项卡。 I am trying to put in an image/icon before the title, But can't seem to see how to do it?
我试图在标题前插入图片/图标,但是似乎看不到该怎么做? I am using version 7 for Angular.
我正在使用Angular 7版本。 My code so far is:
到目前为止,我的代码是:
html.file html.file
<div class="tabs">
<nav mat-tab-nav-bar mat-align-tabs="left">
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
</div>
ts.file ts.file
export class ContentAreaComponent implements OnInit {
navLinks = [
{path: 'details', label: 'V Details'},
{path: 'select', label: 'Product'},
{path: 'clselect', label: 'Client Details'},
];
}
All you need to do is follow this example with the icons in the tabs. 您需要做的就是按照此示例使用选项卡中的图标。 Here is a stackblitz from your code that shows icons in the tabs.
这是代码中的堆栈闪电,在选项卡中显示图标。
Change your template to: 将模板更改为:
<div class="tabs">
<nav mat-tab-nav-bar mat-align-tabs="left">
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
<mat-icon class="example-tab-icon">{{link.icon}}</mat-icon>
{{link.label}}
</a>
</nav>
</div>
In your component add an icon property (see list of icons here ): 在您的组件中添加一个icon属性(请参阅此处的图标列表):
navLinks = [
{path: 'details', label: 'V Details', icon: 'star'},
{path: 'select', label: 'Product', icon: 'star_border'},
{path: 'clselect', label: 'Client Details', icon: 'star_half'},
];
And maybe add some CSS to separate the icon from the tab label: 也许添加一些CSS将图标与标签标签分开:
.example-tab-icon {
margin-right: 8px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.