角材料：拆分按钮

Question

如何在Angular Material中创建一个拆分按钮？它看起来应该类似于我尝试过的Bootstrap sample：

<mat-menu #appMenu="matMenu">
  <button mat-menu-item>... Black Forest</button>
  <button mat-menu-item>... Salted Caramel</button>
</mat-menu>

<mat-button-toggle-group appearance="legacy">
  <mat-button-toggle color="primary" (click)="doSomethingBig()">
    Tell me about Earl Gray Ice Cream
  </mat-button-toggle>

  <mat-button-toggle color="primary" [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>

我的问题：

1. 如果我使用legacy作为外观样式，那么我会产生奇怪的效果，即将背景按钮设为透明。
2. 选项color被完全忽略。有没有办法让颜色不同？特别是如果我想在同一行中使用两个按钮，则一个可能是primary，另一个可能是accent
3. 如果可以更改背景-是否可以在两个按钮之间绘制边框？

Answer 1

可以在mat-button-toggle-group和一些css定义的基础上获得“角度材质”拆分按钮。

查看以下StackBlitz

请注意，mat-button-toggle不像其他Material组件那样支持color属性（请参见答案https://stackoverflow.com/a/48159346/2358409）。