Angular 材料选项卡，将内容放在选项卡的右侧

Question

我在将内容放在选项卡右侧时遇到问题。

我尝试禁用 mat-tab 中的内容，但我不希望我的内容（放置在右侧被禁用）

此外，内容还包含一个下拉菜单。

下面是附图，它显示了我想要实现的目标。

这是我的 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>

我希望顶部的内容放在右边的空白块上。

任何帮助，将不胜感激。 谢谢

Answer 1

您可以使用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>