Угловой материал: сплит кнопка

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. Если я использую legacy в качестве стиля для появления, чемУ меня странный эффект, что фон кнопок прозрачный.
2. Опция color полностью игнорируется. Есть ли способ иметь разные цвета? Особенно, если я хочу использовать две кнопки в одном ряду, чем одна может быть primary, а другая accent
3. Если возможно изменить фон - можно ли нарисовать границу междудве кнопки?

Answer 1

Кнопки разделения углового материала могут быть получены на основе mat-button-toggle-group в сочетании с некоторыми css определениями.

Проверьте следующее StackBlitz

Обратите внимание, что mat-button-toggleне поддерживает свойство color, как другие компоненты Material (см. ответ https://stackoverflow.com/a/48159346/2358409).