Javascript Angular Material 2 - 如何将 mat-toolbar 和 mat-tabs 锁定到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47145113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Material 2 - How to lock mat-toolbar and mat-tabs to the top
提问by Daniel Turcich
For my WebsiteI'm attempting to lock the < Mat-Toolbar > to the top of the screen and then directly under that I want to lock the < Mat-Tabs > .
对于我的网站，我试图将 < Mat-Toolbar > 锁定到屏幕顶部，然后直接在其下方锁定 < Mat-Tabs > 。
The issue I'm running into is that position: fixed in CSS is not locking it at all, and when I actually go to the site and inspect element it's putting in a < div >
我遇到的问题是 position: fixed in CSS 根本没有锁定它，当我真正去网站并检查元素时，它会放入一个 < div >
How am I supposed to lock these two elements to the top, how am I supposed to bypass this auto created Div? I had a previous question similar to this but I solved that using Fixed and Absolute positioning, which that does not apply in this newer version of Angular/ Angular Material.
我应该如何将这两个元素锁定到顶部，我应该如何绕过这个自动创建的 Div？我之前有一个类似的问题，但我使用固定和绝对定位解决了这个问题，这不适用于这个较新版本的 Angular/Angular Material。
回答by Edric
Did you mean a sticky toolbar?
您是说粘性工具栏吗？
Just add a class to the toolbar and make it sticky (using the positionattribute set to sticky):
只需向工具栏添加一个类并使其具有粘性（使用position设置为的属性sticky）：
.app-toolbar {
position: sticky;
position: -webkit-sticky; /* For macOS/iOS Safari */
top: 0; /* Sets the sticky toolbar to be on top */
z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}
Note:There is no support for position: stickyon IE 11. For more info on browser support for position: sticky, view this caniusepage.
注意：position: sticky在 IE 11 上不支持。有关浏览器支持的更多信息position: sticky，请查看此caniuse页面。
回答by Vega
You can probably achieve it by setting the style with ::ng-deep:
您可以通过使用 ::ng-deep 设置样式来实现它：
::ng-deep .mat-toolbar{
z-index: 998;
position: fixed
}
::ng-deep .mat-tab-group{
margin-top:55px !important;
}
::ng-deep .mat-tab-header{
z-index: 999;
width:100vw;
position: fixed !important;
background-color: red !important;
}
::ng-deep .mat-tab-body-wrapper{
position: relative !important;
margin-top:55px;
}
回答by Nikhil Kumar
Even i was facing the same issue for my project. It is very diffiucult to make the toolbar fixed when it's declared inside <mat-sidenav-container>.
即使我的项目也面临同样的问题。工具栏在里面声明时很难固定<mat-sidenav-container>。
The reason why it's difficult is because both <mat-sidenav-container>and <mat-toolbar>uses transform: translate3d(0,0,0).
之所以困难，是因为<mat-sidenav-container>和 都<mat-toolbar>使用transform: translate3d(0,0,0).
So the best way to proceed would be, to remove <mat-toolbar>from <mat-sidenav-container>and write an extenal css for the toolbar.
所以最好的方法是，<mat-toolbar>从<mat-sidenav-container>工具栏删除并编写一个外部 css。
mat-toolbar {
height: 64px;
position: fixed;
z-index: 100;
width: 100% !important;
}
This solution worked for me.
这个解决方案对我有用。
回答by Kavoos
This works for me:
这对我有用：
app.component.html
应用程序组件.html
<div class="app-container">
<mat-sidenav-container>
<mat-sidenav mode="over">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</mat-sidenav>
<mat-toolbar>
<i class="material-icons hamburger-menu">menu</i>
<span>item A</span>
<span>item B</span>
</mat-toolbar>
<div class="app-body">
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>
<div>
style.css
样式文件
.app-body {
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 64px;
}
.app-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
回答by Tar.X
Here's the solution boys.
这是解决方案的男孩。
1) Go the toolbar component and add this to its css/scss file :
1) 转到工具栏组件并将其添加到其 css/scss 文件中：
:host {
// position: sticky;
// position: -webkit-sticky; /* For macOS/iOS Safari */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
2) Now go your root app that contains both the top bar and the router-outlet (app.component by default), and type the following on its css/scss file :
2) 现在转到包含顶部栏和路由器出口（默认为 app.component）的根应用程序，并在其 css/scss 文件中键入以下内容：
:host {
position: absolute;
top: 64px; // here you must specify the height of your topbar
bottom: 0;
left: 0;
right: 0;
}
Took my a few hours, but finally found the solution.
花了我几个小时，但终于找到了解决方案。
