Issue
I have 2 labels and I want them to be in the middle. Angular Material provides simple class mat-align-tabs="center"
which doesn't work at all. I searched an internet an found solutions for md, which is old version of Material. Surprised that nobody didn't face same problem.
HTML:
<mat-tab-group [(selectedIndex)]="selectedTabIndex" mat-align-tabs="center">
<mat-tab id="Wyszuk" label="Wyszukiwanie" *ngIf="!leadOffer.isSent">
<app-offer-search-candidates [offerId]="leadOffer.id" [leadId]="leadId" [offer]="leadOffer"
[candidatesToVerification]="candidatesToVerificationDataSource.data" [awaitingCandidates]="awaitingCandidatesDataSource.data"
(addCandidatesToVerification)="onAddCandidatesToVerification($event)" (addAwaitingCandidates)="onAddAwaitingCandidates($event)"
(addCandidatesToCart)="onAddCandidatesToCart($event)" (searchSave)="onSearchSave($event)">
</app-offer-search-candidates>
</mat-tab>
<mat-tab label="Koszyk ofertowy">
<app-offer-cart [dataSource]="candidatesDataSource" [searchModel]="searchModel" [readOnly]="leadOffer.isSent"
[attachmentsDataSource]="attachmentsDataSource" (refresh)="onRefreshCandidates()" (removeCandidates)="onRemoveCandidatesFromCart($event)"
(sendOffer)="onSendOffer($event)" (removeAllCandidates)="onRemoveAllCandidates()" (removeCart)="onRemoveCart()"
(generateOffer)="onGenerateOffer()" (attachmentsLoaded)="onAttachmentsLoaded($event)" (removeAttachments)="onRemoveAttachments($event)"
(generateCvs)="onGenerateCvs($event)" (updateProjectRole)="onUpdateProjectRole($event)" (updateSuggestedPrice)="onUpdateSuggestedPrice($event)"
(candidateCvLoaded)="onCandidateOfferCvLoaded($event)">
</app-offer-cart>
</mat-tab>
</mat-tab-group>
Solution
It must be a versioning problem. Tried it in Angular 6, not working. But with Angular 7, it is:
https://stackblitz.com/edit/angular-mat-7-install-mat-tab-center
Angular 6:
Add this to your global stylesheet style.scss
.
.mat-tab-labels {
justify-content: center;
}
For more, read here. If you add it to the component.scss it will be overwritten, in the global not. Additional you can specify the component you want this style applied to. https://stackblitz.com/edit/angular6-material-components-mat-tab-centered
Answered By - liqSTAR
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.