[英]Angular2 + Material: mat-toolbar casts no shadow over mat-sidenav-container despite mat-elevation-z*
Trying to mimic the look of the Material guide , I can't get the toolbar's shadow to be rendered atop the mat-sidenav-container element:试图模仿Material guide的外观,我无法在 mat-sidenav-container 元素上渲染工具栏的阴影:
Page showing toolbar and sidenav, but drop shadow isn't visible:页面显示工具栏和 sidenav,但阴影不可见:
Page showing the toolbar alone, the shadow is rendered:页面单独显示工具栏,阴影渲染:
See the HTML code, it can't be more simple.看HTML代码,再简单不过了。 What am I missing?
我错过了什么? Thanks...
谢谢...
app.component.html应用程序组件.html
<mat-toolbar class="mat-elevation-z6" color="primary">
toolbar
</mat-toolbar>
<mat-sidenav-container >
<!-- Side menu -->
<mat-sidenav mode="side" opened="true">
<h3>Menu 1</h3>
<ul>
<!-- Home (aka dashboard) -->
<li>
<a routerLink="/">dashboard</a>
</li>
<!-- Home (aka dashboard) -->
<li>
<a routerLink="/resolutions">resolutions</a>
</li>
</ul>
<!-- List resolutions -->
<h3>Menu 2</h3>
<ul>
<li>
<a>incentive</a>
</li>
</ul>
</mat-sidenav>
<!-- Routed contents -->
<div class="contents">
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>
had the exact same issue.有完全相同的问题。 I resolved it by adding the following class in my CSS:
我通过在 CSS 中添加以下类来解决它:
.sidenav-container {
z-index: -1 !important;
}
and added it to the mat-sidenav-container并将其添加到 mat-sidenav-container
<mat-sidenav-container class="sidenav-container">
...
</mat-sidenav-container>
Add this in your styles:将此添加到您的样式中:
.mat-toolbar {
position: relative;
z-index: 2;
}
I solved the problem as follows:我解决了这个问题如下:
CSS:
.tbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
Then in my template:然后在我的模板中:
HTML:
<mat-toolbar class="mat-elevation-z6 tbar">
...
</mat-toolbar>
not been able to test but.无法测试,但是。 I had a similar sounding issue with cards not looking elevated.
我有一个类似的声音问题,卡看起来不高。 I just need to pad them out from the hard left.
我只需要从最左边的地方把它们垫起来。
<mat-sidenav mode="side" opened="true" style="margin: 10px;">
You can also try this:你也可以试试这个:
.sidenav-container {
position:fixed;
width:100%;
z-index:-1;
}
If changing the z-index doesn't work, add the following class:如果更改 z-index 不起作用,请添加以下类:
<mat-toolbar class="mat-elevation-z2"></mat-toolbar>
As per the angular guide: ( https://material.angular.io/guide/elevation )根据角度指南:( https://material.angular.io/guide/elevation )
I think changing z-index is not optimal.我认为改变 z-index 不是最优的。 Better solution is to just add transparent background to your sidenav components.
更好的解决方案是为 sidenav 组件添加透明背景。
mat-sidenav-container {
background: transparent;
mat-sidenav {
background: transparent; // that one is also necessary if you have mode="side" on your mat-sidenav element
}
}
Worked for me like a charm.像魅力一样为我工作。
Check if you have a class .mat-drawer-container
(You need to search in your CSS files because if you have a background defined, this layer will overload your shadow navbar)检查你是否有一个类
.mat-drawer-container
(你需要在你的 CSS 文件中搜索,因为如果你定义了背景,这个层会超载你的阴影导航栏)
You need to set .mat-drawer-container
background as "none"您需要将
.mat-drawer-container
背景设置为“无”
.mat-drawer-container {
background: none !important;
}
This will solve your issue!这将解决您的问题!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.