[英]Centering mat-tab-group
我有 2 個標簽,我希望它們位於中間。 Angular Material 提供了簡單的類mat-align-tabs="center"
,它根本不起作用。 我在互聯網上搜索找到了 md 的解決方案,這是舊版本的 Material。 令人驚訝的是,沒有人沒有遇到同樣的問題。
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>
應該是版本問題。 在 Angular 6 中嘗試過,不起作用。 但是對於 Angular 7,它是:
https://stackblitz.com/edit/angular-mat-7-install-mat-tab-center
Angular 6:將此添加到您的全局樣式表style.scss
。
.mat-tab-labels {
justify-content: center;
}
有關更多信息,請閱讀 此處。 如果將其添加到 component.scss 中,它將被覆蓋,在全局中不會。 此外,您可以指定要應用此樣式的組件。 https://stackblitz.com/edit/angular6-material-components-mat-tab-center
如果您也希望居中的墊子標簽下的內容也位於中心,則這適用於 Angular 10.0.1。
::ng-deep mat-tab-body {
text-align: center;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.