Угловой Материал: CheckBox в мат-меню;Проблема с темными темами - PullRequest
Новая
       90

Угловой Материал: CheckBox в мат-меню;Проблема с темными темами

2 голосов
/ 08 марта 2019

Вы не можете поставить <mat-checkbox> в <mat-menu> нормально. Если это так, темные темы не применяются к текстовой части вашего <mat-checkbox> (см. Изображение в конце) .

О <mat-label> s есть похожая проблема. Но решение простое:

  • Использование <label mat-menu-item> вместо <mat-label>.

Аналогично о button с.

Но я не смог найти аналогичное решение для <mat-checkbox> es! Это все состояния, которые я тестировал: 

<mat-menu #menu="matMenu">
  <mat-label>Bad label</mat-label>
  <label mat-menu-item>OK label</label>
  <mat-checkbox>Problem here</mat-checkbox>
  <!-- ERROR:
  <mat-checkbox  mat-menu-item>
    Template parse errors:
More than one component matched on this element.
  </mat-checkbox>
  -->
  <br><mat-checkbox></mat-checkbox>
  <label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>

здесь стеблиц

И результат:

enter image description here

1 Ответ

6 голосов
/ 08 марта 2019

Кажется, есть способ назначить menuitemcheckbox для входа role в директиве mat-menu-item ... к сожалению, мне не ясно, как это должно работать ... 

<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
  <button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
  <button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not

С учетом вышесказанного назначение класса mat-menu-item, а не директивы, может быть приемлемым обходным путем. 

<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox>

Stackblitz

https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html

...