Angular Material : Split button

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

Angular Material拆分按钮可以在mat-button-toggle-group的基础上结合一些css定义得到。

查看以下 StackBlitz

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