[英]how to design mat-toolbar full width of the screen
Here, I am using Angular-Material
in which my environment are : Angular CLI: 6.0.5
, Node: 10.1.0
, OS: win32 x64
, Angular: 6.0.3
and I want the output like this: 在这里,我使用
Angular-Material
,我的环境是: Angular CLI: 6.0.5
, Node: 10.1.0
, OS: win32 x64
, Angular: 6.0.3
,我希望输出如下:
To implement exactly same top nav bar I have mat-toolbar
as follows: 要实现完全相同的顶部导航栏,我有
mat-toolbar
如下:
In .html 在.html
<mat-toolbar class="topbar telative mat-toolbar mat-primary mat-toolbar-single-row" color="primary" ng-reflect-color="primary" style="flex-direction: row; box-sizing: border-box; display: flex;position: fixed;" [class.mat-elevation-z24]="isActive">
<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon>
</button>
<h1 class="example-app-name">Admin Panel</h1>
</mat-toolbar>
In .ts 在.ts
I simply have one property for isActive 我只是为isActive提供了一个属性
isActive = true;
My output is absolutely fine but the mat-toolbar
does not cover the full width of screen as a result the vertical scroll bar is coming just in side of mat-toolbar
. 我的输出绝对正常,但是
mat-toolbar
没有覆盖整个屏幕宽度,因此垂直滚动条正好位于mat-toolbar
一侧。 I want to have is scroll bar below my mat-toolbar
as in the image above. 我希望在我的
mat-toolbar
下面有滚动条,如上图所示。 How can I set the width of mat-toolbar
to full screen. 如何将
mat-toolbar
的宽度设置为全屏。
To set mat-toolbar
width to 100% you can do similar in your css file 要将
mat-toolbar
宽度设置为100%,您可以在css文件中执行类似操作
.fixed-header {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100% !important;
}
在你的style.css中添加这个body{margin:0}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.