Снимите галочку с Angular Material Chip, но сохраните изображение аватара

При обновлении моего приложения Angular с версии 14 до 18 многое изменилось. Я использую Angular Material для некоторых компонентов, и чипы работают не так, как раньше.

С новой опцией mat-chip-option к выбранным чипам добавляется галочка (mdc-evolution-chip__checkmark). Я хочу скрыть эту галочку, но сохранить изображение аватара.

Я попытался поставить следующий CSS, но это только скрывает галочку, но сохраняет пространство.

.mdc-evolution-chip__checkmark {
   display: none !important;
}

Я заметил, что --mdc-chip-with-avatar-avatar-size определен в .mat-mdc-standard-chip, но когда я установил для этого параметра значение 0, мое изображение аватара исчезло.

Это HTML-код:

<mat-chip-listbox selectable multiple>
     <mat-chip-option #c *ngFor = "let country of brand.activeCountries" (click) = "toggleCountrySelection(c, country.id, brand.name, country.country, 'market')" 
          [selected] = "checkMarketCountry(country.id)">
          <mat-chip-avatar>
             <img src = "https://flagcdn.com/w20/{{country.country.toLowerCase()}}.png" width = "20"/>
          </mat-chip-avatar>
          {{ transPrefixCountries + country.country | translate }}
     </mat-chip-option>
</mat-chip-listbox>

Это сгенерированный HTML:

<span class = "mdc-evolution-chip__graphic mat-mdc-chip-graphic ng-star-inserted">
   <mat-chip-avatar role = "img" class = "mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary">
      <img width = "20" src = "https://flagcdn.com/w20/be.png">
   </mat-chip-avatar>
   <span class = "mdc-evolution-chip__checkmark">
      <svg viewBox = "-2 -3 30 30" focusable = "false" aria-hidden = "true" class = "mdc-evolution-chip__checkmark-svg">
         <path fill = "none" stroke = "currentColor" d = "M1.73,12.91 8.1,19.28 22.79,4.59" class = "mdc-evolution-chip__checkmark-path"></path>
      </svg>
   </span>
</span>

Фишка с галочкой скрыта, но с открытым пространством.

Ожидаемые результаты:

Выбранный чип, без галочки и без набора аватаров Выбранный чип, без галочки и набора аватаров

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не могли бы вы попробовать приведенный ниже CSS. Структура HTML, похоже, изменилась. Я использую здесь ::ng-deep для стилизации фишек (устарело). Вы также можете использовать файлы globalstyles с классом, чтобы охватить эти изменения.

HTML:

<mat-chip-listbox selectable multiple>
  <mat-chip-option #c *ngFor = "let country of activeCountries">
      <img src = "https://flagcdn.com/w20/al.png" width = "20" />
    {{ transPrefixCountries + country.country }}
  </mat-chip-option>
</mat-chip-listbox>

<mat-chip-listbox selectable multiple>
  <mat-chip-option #c *ngFor = "let country of activeCountries">
    {{ transPrefixCountries + country.country }}
  </mat-chip-option>
</mat-chip-listbox>

CSS:

::ng-deep
  .mdc-evolution-chip__action[aria-selected='true']
  .mdc-evolution-chip__graphic.mat-mdc-chip-graphic {
  display: none !important;
}

::ng-deep .mdc-evolution-chip__action[aria-selected='true'] {
  padding-left: 12px !important;
}

Демо-версия Stackblitz

никаких успехов с этими классами. Все равно открытое пространство.

NiAu 25.07.2024 09:07

@NiAu Не могли бы вы изменить stackblitz, воспроизвести проблему и поделиться им для проверки, я думаю, что версии материалов разные, вы можете сравнить два package.json

Naren Murali 25.07.2024 09:08

Мне пришлось убрать display: none, чтобы флаг был виден. При выборе чипа выскакивает галочка. Так что никакой разницы нет.

NiAu 25.07.2024 14:42

@NiAu попробуй, обновил мой ответ!

Naren Murali 25.07.2024 15:00

Что ты изменил? Порядок занятий? Все еще не повезло.

NiAu 25.07.2024 16:13

@NiAu, пожалуйста, измените мой stackblitz и поделитесь также изображением ожидаемого результата, который вам нужен.

Naren Murali 25.07.2024 16:17

Я обновил ожидаемые результаты и Stackblitz, stackblitz.com/edit/mbt2dz-nm2exz

NiAu 25.07.2024 21:58

@NiAu обновил мой ответ!

Naren Murali 26.07.2024 05:36

Давайте продолжим обсуждение в чате.

NiAu 26.07.2024 07:55

@NiAu, твоя проблема решена?

Naren Murali 29.07.2024 10:06

Другие вопросы по теме