定心垫片组

时间:2019-05-29 12:41:45

标签: angular material

我有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>

Check this Image Out

2 个答案:

答案 0 :(得分:1)

必须是版本问题。在Angular 6中尝试过,无法正常工作。但是对于Angular 7,它是:

https://stackblitz.com/edit/angular-mat-7-install-mat-tab-center

角度6: 将此添加到全局样式表style.scss

.mat-tab-labels {
    justify-content: center;
}

有关更多信息,请阅读here。如果将其添加到component.scss中,它将被覆盖,而不会被全局覆盖。另外,您可以指定要应用此样式的组件。 https://stackblitz.com/edit/angular6-material-components-mat-tab-centered

答案 1 :(得分:0)

如果您也希望内容位于居中居中的mat选项卡下,则在Angular 10.0.1中也可以使用。

::ng-deep mat-tab-body {
      text-align: center;
    }