Угловое положение значка материала

Я пытаюсь добавить значок углового материала в свой список меню.

Можно ли разместить значок в центре элемента списка?

Официальный документ гласит: «По умолчанию значок будет размещен вверху после. Направление может быть изменено путем определения атрибута matBadgePosition, следующего за выше | ниже и перед | после».

Но мне нужно исключить эту опцию вверху | внизу

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

Или, по крайней мере, если можно сделать видимым весь значок внутри элемента списка


angular angular-material angular6 angular-material-6
person Ante Ereš    schedule 24.08.2018    source источник
comment
Вы можете добавить отступ к элементу списка, чтобы значок был полностью виден. Но сам значок имеет только задокументированные возможности. Конечно, вы все равно можете написать свой собственный значок ... была та же проблема, и в одном случае я использовал заполнение, а в другом я добавил номер в текст (например, Уведомления (4)). Чего я не пробовал, так это манипулировать положением значка через css.   -  person Fildor    schedule 24.08.2018
comment
@Fildor Я пробовал с прокладкой на mat-menu-item. Это не помогло. Mat-menu-item имеет 2 дочерних элемента: mat-icon и h3 (где текстовое уведомление и свойства значка). Если я добавлю отступ к элементу h3, я смогу увидеть значок, но мой текст больше не будет посередине по вертикали.   -  person Ante Ereš    schedule 24.08.2018
comment
используйте: host :: ng-deep css-селекторы для класса mat-badge-content   -  person B.Habibzadeh    schedule 06.05.2021

Ответы (3)


arrow_upward
8
arrow_downward

Отметьте это blitzy

Решено с помощью CSS

.mat-badge-medium.mat-badge-above .mat-badge-content {
    top: -3px;
}
person dota2pro    schedule 22.05.2019

arrow_upward
3
arrow_downward 

mat-badge-medium.mat-badge-above .mat-badge-content {
  top: unset;
  right: unset;
}

Удаляет верхние и правые значения, заданные материалом.

person mounds    schedule 27.05.2020

arrow_upward
0
arrow_downward

Если вы хотите стилизовать его из собственного файла component.css, вы можете сделать:

:host ::ng-deep .mat-badge-content 
{
left: -4px !important;
top: 40px !important;
}
person B.Habibzadeh    schedule 06.05.2021