CODEWITHSUNDEEP
cssangular
expenguin
expenguin

Reputation: 1124

How to disable gray "wipe" effect when clicking mat-menu-item

I've got a mat-nav-list with mat-menu-items within. I've setup a routerLinkActive class in my scss to change the background and color of the text of the mat-menu-item when an item is clicked. However, when one of the items is clicked, it changes it background to a light gray and my background-color is only shown after you click elsewhere within the application.

The behavior is visible in the below gif.

Behavior of Mat-Menu-Item on click

I'd like for the mat-menu-item background-color to change to my chosen chosen color without the default "gray wipe" behavior, is this possible?

My code is below if required:

app.html

<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>

app.scss

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

Upvotes: 2

Views: 3991

Answers (3)

Gary Kelly
Gary Kelly

Reputation: 43

The shadow is caused by 'mat-list-item-ripple' and 'mat-ripple'. I know of two solutions:

1) Add the following to your styles.css:

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

2) Or add the following to the .css of the page in question:

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

Upvotes: 0

joh04667
joh04667

Reputation: 7427

I'd advise against using !important wherever possible. With a view-encapsulated framework like Angular, it's almost never required to override CSS options. Plus, with overriding the ink effect's styles, the ripple and behavior is still there, just invisible--it's still a semi-expensive animation, both with resources and time taken to complete.

Instead, the MatList, MatOption, and MatNavList API has a native option called disableRipple to get rid of the ink effect.

<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>

You can also use disableRipple selectively on each mat-list-item.

Upvotes: 2

N.Tasikj
N.Tasikj

Reputation: 386

Just put !important after your background-color css to override mat's background color.

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

Upvotes: 4

Related Questions