[英]how to design mat-toolbar full width of the screen
在这里,我使用Angular-Material
,我的环境是: Angular CLI: 6.0.5
, Node: 10.1.0
, OS: win32 x64
, Angular: 6.0.3
,我希望输出如下:
要实现完全相同的顶部导航栏,我有mat-toolbar
如下:
在.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>
在.ts
我只是为isActive提供了一个属性
isActive = true;
我的输出绝对正常,但是mat-toolbar
没有覆盖整个屏幕宽度,因此垂直滚动条正好位于mat-toolbar
一侧。 我希望在我的mat-toolbar
下面有滚动条,如上图所示。 如何将mat-toolbar
的宽度设置为全屏。
要将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.