I am currently developing an Angular 2 site and having some trouble with the SideNav component.
The SideNav can have 3 modes, none of which seem to change what happens when I open the Sidenav. I am trying to get the backdrop to display after opening.
The sideNav does open, however the backdrop doesn' t show up.
The root of the app is the md-sidenav container . The SideBar
component will also be passed to the NavBar
component as the open button is defined in there.
Note that I have also tried to bring the SideBar
component outside the <md-sidenav-container>
<md-sidenav-container>
<sidebar #sideBarComponent></sidebar>
<navbar [sideBar]=sideBarComponent></navbar>
<router-outlet></router-outlet>
</md-sidenav-container>
The SidNnav currently contains 2 links and is set to mode " over " (which should create a SideNav and backdrop over the main content)
<md-sidenav #sideBar mode="over">
<md-nav-list>
<a md-list-item routerLink="/home" (click)="sideBar.close()" routerLinkActive="active-link">
<md-icon md-list-icon>home</md-icon>
<p md-line>Home</p>
</a>
<a md-list-item routerLink="/users" (click)="sideBar.close()" routerLinkActive="active-link">
<md-icon md-list-icon>account_circle</md-icon>
<p md-line>Users</p>
</a>
</md-nav-list>
</md-sidenav>
Inspecting the page using chrome's developer tools reveals that a backdrop is created ( <div class="md-sidenav-backdrop"></div>
) and covering the whole page, however it is set to hidden and has no effect due to not having a functional CSS applied to it. (only set fixed width, height and position, nothing visible that alters the page)
The prebuild-css has a background color tag for it, however it needs a .md-sidenav-shown
:
.md-sidenav-backdrop.md-sidenav-shown {
background-color: rgba(0, 0, 0, .6)
}
Is there anything that would cause this behavior to happen? None of the tutorials and examples I found did something complicated so I think it is due to my set-up.
Relevant Libraries and versions (All webjars):
Angular 2.4.1
common
core
compiler
forms
http
platform-browser
platform-browser-dynamic
router
Angular-Material 2.0.0-Beta.1
SystemJs 0.19.41
Core-js 2.4.1
Reflect-Metadata 0.1.8
Typescript 2.1.4
RxJs 5.0.1
HammerJS 2.0.6
Zone.js 0.7.4
It seems that you cannot put md-sidenav
inside component because there is no link between md-sidenav-container
and child md-sidenav
's. Md-sidenav-container
uses @ContentChildren
to access md-sidenav
instances.
So there must be direct parent-child relation between md-sidenav-container
and md-sidenav
.
To keep the scope of CSS defined in your.component.css
limited to only that component, Angular processes the CSS/SCSS/SASS files and adds "attribute" selectors to each CSS rule defined in that file.
In your case, it converts your .md-sidenav-backdrop.md-sidenav-shown {...}
CSS rule into something like:
.md-sidenav-backdrop.md-sidenav-shown[_ngcontent-xyh-65] {
background-color: rgba(0, 0, 0, .6)
}
Angular is strict about restricting the scope. The trouble is that the backdrop <div class="md-sidenav-backdrop"></div>
is added by the material component (at browser render time, I presume). Hence, the selector suffix [_ngcontent-xyh-65]
is not added to that element at compile time.
The only way around it, that I could find till now, is to move your CSS to <root>/src/styles.css
. UPDATE: As Rose suggests, it would be safest to have your component name selector prefixed to the CSS you add in styles.css
. In your case:
md-sidenav-container > .md-sidenav-backdrop.md-sidenav-shown {
background-color: rgba(0, 0, 0, .6)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.