相关疑难解决方法(0)

如何在 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. 如果可以更改背景 - 是否可以在两个按钮之间绘制边框？

我找到了如何自定义材质切换按钮的精彩链接。我成功设置background-color和font-weight我想的方式

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

.mat-button-toggle-checked {
    background-color: mat-color($primary);
    font-weight: bold;
    color:mat-color($primary); // <=== does not work!!!
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

但不知何故，字体本身保持黑色 - 这不是使用color="primary".

知道如何包括fore-color- 正确吗？