angular - 居中垫选项卡组
问题描述
我有 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-centered
推荐阅读
- go - 一次允许一个 gocron
- azure-data-explorer - 需要在运行时在表上触发 kusto 查询
- react-native - SwipeRow 覆盖内部按钮
- javascript - 用户对 Web 应用程序中“保存”、“下载”和“打开”的混淆
- python - ModuleNotFoundError:没有名为“icalendar”谷歌云的模块
- html - 浏览器调试器 - 如何更改脚本代码
- angular - Typescript中的布尔值和布尔值有什么区别?
- node.js - Fetch image from azure-blob and send it to client without saving locally using node server
- python - 你可以使用 discord.py 从服务器上大规模踢人吗
- mysql - 从 Java 和 Shell 运行 cmd 时在 Mysqldump 中添加日期