角材质：拆分按钮答案

【问题标题】：Angular Material: Split button角材质：拆分按钮
【发布时间】：2019-10-30 08:44:23
【问题描述】：

如何在 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>

我的问题：

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

【问题讨论】：

也许你可以通过修改它的 css 来将你的 mat-select 设置为一个按钮，这会有所帮助。

标签： angular angular-material

【解决方案1】：

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

查看以下StackBlitz

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

【讨论】：

看起来很棒 - 比我使用 @mixin 样式修改的方法好一点。 Thx...显然我下次需要使用的东西。