Снимите галочку с 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>

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

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

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

🤔 А знаете ли вы, что...
Angular имеет активное сообщество разработчиков и обширную документацию.


63
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