Блог

Главная - Вопросы по программированию - Угловой материал: флажок в mat-меню; Проблема с темными темами

Угловой материал: флажок в mat-меню; Проблема с темными темами

#angular #checkbox #menu #angular-material #menu-items

#angular #флажок #меню #angular-material #пункты меню

Вопрос:

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

О <mat-label> s существует аналогичная проблема. Но решение простое:

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

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

Но я не смог найти аналогичное решение для <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>

stackblitz

И результат:

введите описание изображения здесь

Ответ №1:

Кажется, есть способ назначить 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 </button>

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

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

Stackblitz

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

Комментарии:

1. Согласно github.com/angular/components/pull/14165 , роль управляет только aria-ролью в пункте меню. Добавление первоклассных элементов mat-item-checkbox, возможно, появится в будущем minor

Ответ №2:

Начиная с Angular Material 11, class="mat-menu-item" обходное решение, введенное Marshal, похоже, не работает. Вы можете исправить это, применив mat-menu-item директиву к div упаковке вашего mat-checkbox .

 <div mat-menu-item>
  <mat-checkbox>Problem here</mat-checkbox> 
</div>

Имейте в виду, что флажок теперь срабатывает только при нажатии точно на флажок, а не при нажатии на любую другую точку пункта меню. Это вызывает только анимацию щелчка. Чтобы обойти это, вы можете зарегистрировать (click)="..." прослушиватель в обтекающем div.

Комментарии:

1. Вы правы, чтобы добавить поведение при нажатии, вы можете зарегистрировать (click) следующим образом: (click)=»$event.preventDefault(); Проверка фильтра. _inputElement.nativeElement.click()»

2. должно быть <div mat-menu-item> <mat-checkbox>Problem here</mat-checkbox> </div>

Ответ №3:

Уточнение ответа Aki:

 <div mat-menu-item (click)="$event.stopPropagation(); cb.toggle()" (keydown.enter)="$event.stopPropagation(); cb.toggle()">
  <mat-checkbox class="mat-menu__checkbox" (click)="$event.stopPropagation()" #cb>Problem No Longer Here</mat-checkbox>
</div>

Требуется div-оболочка (keydown.enter) , чтобы элементы управления клавиатурой для mat-меню все еще работали правильно. Мы также регистрируем событие щелчка, поэтому, если пользователь нажимает на правый или левый края пункта меню, он переключает флажок. $event.stopPropagation() предназначен для предотвращения закрытия меню, пока пользователь взаимодействует с флажками.

Затем добавьте следующее в свою таблицу стилей:

 .mat-menu__checkbox {
  height: 100%;
  amp;::ng-deep .mat-checkbox-layout {
    height: 100%;
    amp;::ng-deep .mat-checkbox-label {
      margin: auto;
      vertical-align: middle;
      position: relative;
    }
  }
}

Этот стиль сделает надпись вашего mat-флажка на всю высоту пункта меню и сохранит ее вертикальный центр. Это позволяет щелкнуть флажок в любом месте, и он сработает.