Angular 材料：在 mat-tab-labels 之間創建分隔線

Question

我有一個標簽組，其中三個標簽左對齊。 我想在 mat 選項卡組上添加一組按鈕，右對齊。 我嘗試使用fxFlex在選項卡和按鈕之間創建分隔線，但它似乎不起作用。

有誰知道我還能如何 go 關於它？

我有的：

我想要達到的目標：

代碼：

<mat-tab-group mat-align-tabs="start">
  <mat-tab label="Items">Content</mat-tab>
  <mat-tab label="Properties">Content</mat-tab>
  <mat-tab label="Subcategories">Content</mat-tab>

  <!-- <mat-tab disabled fxFlex></mat-tab> Tried to add a disabled tab as a divider here, but it doesnt flex -->

  <mat-tab disabled>
    <ng-template mat-tab-label>
       <!-- <div fxFlex></div> Tried to add a div with flex here, doesnt work -->
       <!-- Buttons here -->
    </ng-template>

</mat-tab-group>

Answer 1

您需要將以下行添加到styles.css抱歉，它有點老套，找不到更好的解決方案，只需要放棄一個aria-label值作為間隔。

styles.css

div.mat-tab-label[aria-label='spacer'] {
  flex-grow: 1 !important;
}

app.com.html

<div>
  <span class="example-input-label"> Selected tab index: </span>
  <mat-form-field>
    <input matInput type="number" [formControl]="selected" />
  </mat-form-field>
</div>

<div>
  <button
    mat-raised-button
    class="example-add-tab-button"
    (click)="addTab(selectAfterAdding.checked)"
  >
    Add new tab
  </button>
  <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>

<mat-tab-group
  [selectedIndex]="selected.value"
  (selectedIndexChange)="selected.setValue($event)"
>
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab

    <button
      mat-raised-button
      class="example-delete-tab-button"
      [disabled]="tabs.length === 1"
      (click)="removeTab(index)"
    >
      Delete Tab
    </button>
  </mat-tab>

  <mat-tab disabled aria-label="spacer" aria-hidden="true"></mat-tab>

  <mat-tab disabled>
    <ng-template mat-tab-label>
      <mat-button-toggle value="bold">Bold</mat-button-toggle>
      <mat-button-toggle value="italic">Italic</mat-button-toggle>
      <mat-button-toggle value="underline">Underline</mat-button-toggle>
    </ng-template>
  </mat-tab>
</mat-tab-group>

分叉的堆棧閃電戰