gpt4 book ai didi

Angular2 + Material : mat-toolbar casts no shadow over mat-sidenav-container despite mat-elevation-z*

转载 作者:太空狗 更新时间:2023-10-29 17:17:08 31 4
gpt4 key购买 nike

试图模仿 Material guide 的外观,我无法让工具栏的阴影呈现在 mat-sidenav-container 元素之上:

显示工具栏和 sidenav 的页面,但投影不可见:

enter image description here

单独显示工具栏的页面,渲染了阴影:

enter image description here

看HTML代码,再简单不过了。我错过了什么?谢谢...

app.component.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>

最佳答案

将此添加到您的样式中:

.mat-toolbar {
position: relative;
z-index: 2;
}

关于Angular2 + Material : mat-toolbar casts no shadow over mat-sidenav-container despite mat-elevation-z*,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46647866/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com