垫子工具栏的宽度与垫子侧面导航不匹配

时间:2019-04-18 03:19:56

标签: css angular angular-material

学习角材料设计。我创建了一个侧面导航,并在其中放置了一个mat-toolbar,但是mat-tool bar并未占用其父side-nav的全部宽度,在其右侧显示了一些白线(这是其背景颜色父母) 如何删除白色背景

https://i.imgur.com/TaYIzjd.png

main-nav.component.html

`<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
      <mat-toolbar color="primary">Menu
      </mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>printhouse</span>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>`

main-nav.component.css

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
 box-shadow:  2px 0 6px rgba(0,0,0,0.24);

}

.sidenav .mat-toolbar {
  /* background: inherit; */

 }


.mat-toolbar.mat-primary {
  position:sticky;
  top: 0;
  z-index: 1;

}

如何删除白色背景

1 个答案:

答案 0 :(得分:1)

将以下内容添加到CSS:

fig,ax=plt.subplots()
  

可以找到工作中的闪电战   here