<div *ngIf="!mail" class="toolbar" fxLayout="row" fxLayoutAlign="start center">
  <mat-checkbox class="checkbox"></mat-checkbox>
  <button mat-icon-button><mat-icon>refresh</mat-icon></button>
  <button mat-icon-button><mat-icon>more_vert</mat-icon></button>
  <span fxFlex></span> <span>第1 - 30行, 共{{ itemCount }}行 </span>
  <div class="chevrons">
    <button mat-icon-button><mat-icon>chevron_left</mat-icon></button>
    <button mat-icon-button><mat-icon>chevron_right</mat-icon></button>
  </div>
  <button mat-icon-button><mat-icon>settings</mat-icon></button>
</div>

<div
  *ngIf="mail"
  class="toolbar toolbar-detail"
  fxLayout="row"
  fxLayoutAlign="start center"
>
  <div class="icon-group">
    <button
      class="back"
      mat-icon-button
      matTooltip="返回"
      (click)="onForwardTriggered()"
    >
      <mat-icon>arrow_back</mat-icon>
    </button>
  </div>
  <div class="icon-group">
    <button class="archive" mat-icon-button matTooltip="收取">
      <mat-icon>archive</mat-icon>
    </button>
    <button class="spam" mat-icon-button matTooltip="标记垃圾">
      <mat-icon>error</mat-icon>
    </button>
    <button class="delete" mat-icon-button matTooltip="删除">
      <mat-icon>delete</mat-icon>
    </button>
  </div>
  <div class="icon-group">
    <button class="archive" mat-icon-button matTooltip="移动到">
      <mat-icon>folder</mat-icon>
    </button>
    <button
      class="spam"
      mat-icon-button
      matTooltip="标签"
      [matMenuTriggerFor]="mailLabels"
    >
      <mat-icon>label</mat-icon>
    </button>
  </div>
  <button class="delete" mat-icon-button [matMenuTriggerFor]="mailOptions">
    <mat-icon>more_vert</mat-icon>
  </button>
  <span fxFlex></span> <span>第 1 个会话，共 30 个</span>
  <div class="chevrons">
    <button mat-icon-button><mat-icon>chevron_left</mat-icon></button>
    <button mat-icon-button><mat-icon>chevron_right</mat-icon></button>
  </div>
</div>

<mat-menu #mailOptions="matMenu">
  <button mat-menu-item><mat-icon>markunread_mailbox</mat-icon>标记未读</button>
  <button mat-menu-item><mat-icon>label</mat-icon> 标签</button>
  <mat-divider></mat-divider>
  <button mat-menu-item><mat-icon>delete</mat-icon> 删除</button>
</mat-menu>

<mat-menu #mailLabels="matMenu">
  <button mat-menu-item><mat-icon>markunread_mailbox</mat-icon>标记未读</button>
  <button mat-menu-item><mat-icon>label</mat-icon> 标签</button>
  <mat-divider></mat-divider>
  <button mat-menu-item><mat-icon>delete</mat-icon> 删除</button>
</mat-menu>

./toolbar.component.scss

.toolbar {
  min-height: 48px;
  max-height: 48px;
  padding: 8px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.87);

  .chevrons {
    margin-left: 16px;
  }

  .checkbox {
    margin-right: 8px;
  }
}

.toolbar-detail {
  .icon-group {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
  }

  .back {
    margin-left: -12px;
    margin-right: 12px;
  }

  .archive {
    margin-left: 12px;
    margin-right: 6px;
  }

  .spam {
    margin-left: 6px;
    margin-right: 6px;
  }

  .delete {
    margin-left: 6px;
    margin-right: 12px;
  }

  .move {
    margin-left: 12px;
    margin-right: 6px;
  }

  .label {
    margin-left: 6px;
    margin-right: 12px;
  }

  .options {
    margin-left: 12px;
    margin-right: 12px;
  }
}