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