[英]Angular Material Tabs, Place content on the right side of the tabs
I am having a problem placing content on the right side of the tabs.我在将内容放在选项卡右侧时遇到问题。
I tried putting content in mat-tab disabled but I don't want my content (placed on the right side to be disabled)我尝试禁用 mat-tab 中的内容,但我不希望我的内容(放置在右侧被禁用)
Moreover, the content also contains a dropdown.此外,内容还包含一个下拉菜单。
Below is the attached image, which shows what I want to achieve.下面是附图,它显示了我想要实现的目标。
This my html code这是我的 html 代码
<!-- My input box with menu -->
<div class="d-flex flex-wrap">
<div class="mt-1 mr-2">
<app-add-mention-filter>
</app-add-mention-filter>
</div>
<div class="pt-3 mr-2">
<app-mention-action>
</app-mention-action>
</div>
</div>
<!-- my mat tabs -->
<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="selectTab($event)">
<!-- mention_view -->
<mat-tab (click)="selectTab(0)" label="List View">
<ng-template matTabContent>
<div *ngIf="project && scopes && filterObj.projectId">
<app-mention>
</app-mention>
</div>
</ng-template>
</mat-tab>
<!-- dashboard_view -->
<mat-tab (click)="selectTab(1)" label="Dashboard">
<ng-template matTabContent>
<app-custom-report>
</app-custom-report>
</ng-template>
</mat-tab>
<!-- bulk_view -->
<mat-tab (click)="selectTab(2)" label="Bulk View">
<ng-template matTabContent>
<app-bulk-edit-mention>
</app-bulk-edit-mention>
</ng-template>
</mat-tab>
</mat-tab-group>
I want my content on the top to be placed on the right empty block.我希望顶部的内容放在右边的空白块上。
Any help would be appreciated.任何帮助,将不胜感激。 Thanks
谢谢
You can achieve that using HTML and css , I will use Bootstrap classes to show you that.您可以使用HTML和css来实现,我将使用Bootstrap类向您展示。
<div class="row">
<div class="col">
<!-- Your material tabs -->
</div>
<div class="col d-flex justify-content-end">
<!-- Your search box -->
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.