角材质：分体按钮

Question

如何在 Angular Material 中制作分割按钮？它应该看起来类似于我尝试过的Bootstrap 示例：

<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. 如果我使用legacyas 样式进行外观，则会产生奇怪的效果，即按钮背景透明。
2. 该选项color被完全忽略。有没有办法有不同的颜色？特别是如果我想在同一行使用它的两个按钮，而不是一个可以使用primary另一个按钮accent
3. 如果可以更改背景 - 是否可以在两个按钮之间绘制边框？

Answer 1

mat-button-toggle-group结合一些定义可以得到Angular Material分割按钮css。

查看以下StackBlitz

请注意，它mat-button-toggle不像其他 Material 组件那样支持颜色属性（请参阅答案/sf/answers/3371154251/）。