1
votes

Comment désactiver l'effet "essuyer" gris en cliquant sur l'élément de menu mat

J'ai une liste mat-nav-list contenant des éléments de menu mat. J'ai configuré une classe routerLinkActive dans mon scss pour changer l'arrière-plan et la couleur du texte de l'élément de menu mat lorsqu'un élément est cliqué. Cependant, lorsque l'utilisateur clique sur l'un des éléments, son arrière-plan devient gris clair et ma couleur d'arrière-plan n'apparaît qu'après avoir cliqué ailleurs dans l'application.

Le comportement est visible dans le gif ci-dessous.

Je voudrais que l'élément mat-menu-background-color devienne la couleur choisie sans le comportement par défaut "effacement gris", est-ce possible?

Mon code est ci-dessous si nécessaire:

app.html

.active {
    border-left: 5px solid mat-color($accent);
    background-color: mat-color($primary);
    color: $light-primary-text !important;
}

<mat-sidenav #sidenav mode="side" [opened]="(sideNavOpened)" class="sidenav-inner-content">
    <mat-nav-list>
        <a mat-list-item routerLink="/customers/search" routerLinkActive="active"><mat-icon>search</mat-icon> Search Customer</a>
        <a mat-list-item routerLink="/customers/create" routerLinkActive="active"><mat-icon>add</mat-icon> Create Customer</a>
    </mat-nav-list>
</mat-sidenav>

angular css

5 commentaires

D'un rapide coup d'œil à la documentation material.angular.io/components/menu/api il y a trois @Input () intéressants que vous pourriez utiliser pour remplacer l'effet de "balayage gris" - avez-vous essayé de définir backdropClass , hasBackdrop ou panelClass ?

Êtes-vous sûr que ce background-color: mat-color ($ primary); est correct? Essayez uniquement background-color: $ primary; si vous avez de la couleur dans la variable primaire. Vous pouvez également désactiver les événements de pointeur avec pointer-events: none en CSS. Si vous pouvez publier le lien de cet exemple sur stackblitz, veuillez.

@ N.Tasikj mat-color ($ primary) est correct. Comme vous pouvez le voir, cela met à jour la couleur de mon élément, mais ce n'est pas visible en raison de la superposition de l'essuyage de l'élément de menu mat.

Aha oui, essayez-le avec la création de couleurs de fond! Important, travaillant pour moi

@ N.Tasikj ah-ha, si simple, je ne peux pas croire que j'ai raté ça. N'hésitez pas à faire une réponse et je l'accepterai.

3 Réponses :

2
votes

Mettez simplement! important après votre CSS de couleur d'arrière-plan pour remplacer la couleur d'arrière-plan du tapis.

.active {
    border-left: 5px solid mat-color($accent);
    background-color: mat-color($primary) !important;
    color: $light-primary-text !important;
}

0 commentaires

-1
votes

Je déconseille d'utiliser ! important dans la mesure du possible. Avec un framework encapsulé en vue comme Angular, il n'est presque jamais nécessaire de remplacer les options CSS. De plus, avec le remplacement des styles de l'effet d'encre, l'ondulation et le comportement sont toujours là, juste invisibles - c'est toujours une animation semi-coûteuse, à la fois avec des ressources et du temps pour terminer.

Au lieu de cela, la MatList code>, MatOption et MatNavList API a une option native appelée disableRipple pour supprimer l'effet d'encre.

<mat-sidenav #sidenav mode="side" [opened]="(sideNavOpened)" class="sidenav-inner-content">
    <mat-nav-list [disableRipple]="true">
        <a mat-list-item routerLink="/customers/search" routerLinkActive="active"><mat-icon>search</mat-icon> Search Customer</a>
        <a mat-list-item routerLink="/customers/create" routerLinkActive="active"><mat-icon>add</mat-icon> Create Customer</a>
    </mat-nav-list>
</mat-sidenav>

Vous pouvez également utiliser disableRipple de manière sélective sur chaque mat-list-item .

1 commentaires

Merci pour votre réponse, mais cela ne s'applique qu'à l'effet d'animation, pas à la superposition de couleurs. L'effet d'entraînement est bien, mais c'est le changement de couleur qui a fait dérailler mon résultat escompté.

0
votes

L'ombre est causée par 'mat-list-item-ripple' et 'mat-ripple'. Je connais deux solutions:

1) Ajoutez ce qui suit à votre styles.css:

::ng-deep .mat-nav-list .mat-list-item .mat-list-item-ripple {
  visibility: hidden !important;
}

2) Ou ajoutez ce qui suit au .css de la page en question :

.mat-nav-list .mat-list-item .mat-list-item-ripple {
  visibility: hidden !important;
}

0 commentaires