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>