Menu
I use some components from Angular Material in my project, and I have some issues with removing the grey overlay/backdrop for the service $mdSidenav, because I don't see where I can configure it.
As I don't want to hack the core code in Angular material, I am wondering what's the best way of removing the grey overlay/backdrop when the side nav panel slides in (active). Could someone point me to where I can configure or override the grey overlay? Thanks
448
A <mat-sidenav> can be opened or closed using the open() , close() and toggle() methods.
For <mat-sidenav> only (not <mat-drawer> ) fixed positioning is supported. It can be enabled by setting the fixedInViewport property. Additionally, top and bottom space can be set via the fixedTopGap and fixedBottomGap. These properties accept a pixel value amount of space to add at the top or bottom.
MatDrawer. This component corresponds to a drawer that can be opened on the drawer container. Selector: mat-drawer.
The <mat-sidenav>, an Angular Directive, is used to create a side navigation bar and main content panel with material design styling and animation capabilities. <mat-sidenav-container> - Represents the main container. <mat-sidenav-content> - Represents the content panel. <mat-sidenav> - Represents the side panel.
You can use the built-in Angular Material attribute directive md-disable-backdrop. It accepts a boolean value and, when present in the markup, the sidenav will not show a backdrop.
<md-sidenav md-disable-backdrop>
</md-sidenav>
Using CSS:
md-backdrop.md-sidenav-backdrop{
display:none
}
Warning: This could break user functionality.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
