Display icon and label in adf-info-drawer-tab (#3628)

- label is not displayed in case there is an icon set on the adf-info-drawer-tab
because it is using a mat-tab-label layout
This commit is contained in:
Nicolas Barithel 2018-07-31 16:52:03 +02:00 committed by Eugenio Romano
parent f9195e4e27
commit 88a5a57c46
2 changed files with 13 additions and 10 deletions

View File

@ -8,17 +8,16 @@
<ng-template #tabLayout> <ng-template #tabLayout>
<mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)"> <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
<ng-container *ngFor="let contentBlock of contentBlocks"> <mat-tab *ngFor="let contentBlock of contentBlocks" [label]="contentBlock.label" class="adf-info-drawer-tab">
<mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab"> <ng-container *ngIf="contentBlock.icon">
<ng-container *ngIf="contentBlock.icon"> <ng-template mat-tab-label>
<ng-template mat-tab-label> <mat-icon>{{ contentBlock.icon }}</mat-icon>
<mat-icon>{{ contentBlock.icon }}</mat-icon> <span *ngIf="contentBlock.label">{{ contentBlock.label }}</span>
</ng-template> </ng-template>
</ng-container> </ng-container>
<ng-container *ngTemplateOutlet="contentBlock.content"></ng-container> <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
</mat-tab> </mat-tab>
</ng-container>
</mat-tab-group> </mat-tab-group>
</ng-template> </ng-template>

View File

@ -28,6 +28,10 @@
.mat-tab-label { .mat-tab-label {
flex-grow: 1; flex-grow: 1;
.mat-icon + span {
padding-left: 5px;
}
} }
.mat-ink-bar { .mat-ink-bar {