0

请在此处查看代码：https ://stackblitz.com/edit/angular-sidenav-mixedpushover

我想设置一个有角度的材质sidenav，以便它有一个始终可见的切换按钮，并在sidenav 打开和关闭时滑动。当按钮和sidenav打开时（即mode="over"），主要内容区域应该被按钮和sidenav遮挡。

基本上我希望sidenav在“over”模式下运行，但要“按下”切换它的按钮。

我尝试了几种方法，但没有一种方法很正确。我当前的实现（不共享，因为很难做一个简单的例子）有两个切换按钮：一个位于屏幕边缘，手动显示/隐藏，另一个按钮是 sidenav 内容本身的一部分. 如果你眯着眼睛，它几乎就像一个随 sidenav 滑动的按钮！我还使用了一些动画来尝试将两个按钮混合一点，但是很难匹配 sidenav 的速度。

我正在尝试做的一些图片。

Sidenav 已关闭：

Sidenav 已关闭

西德纳夫开放中：

Sidenav 已打开

有人有任何可行的建议吗？谢谢！

4

1 回答 1

1

如果只想看结果，请到答案末尾

要做的主要事情是将切换按钮与sidenav.

HTML

<p><button [ngClass]="{'button':true,'open':opened}" (click)="toggle()">Open</button></p>

<mat-sidenav-container class="sidenav" (backdropClick)="close()">
  <mat-sidenav #sidenav (keydown.escape)="close()" disableClose position="end">
    <p>Sidenav content</p>
  </mat-sidenav>

  <mat-sidenav-content>
    Page content with "over" sidenav
  </mat-sidenav-content>
</mat-sidenav-container>

在这里，您将按钮从 中取出sidenav，类允许您首先将按钮放置在您想要的位置 - 使用button类 - 然后在您打开或关闭侧导航时移动它 - 使用open类。

和(backdropClick)="close()"是(keydown.escape)="close()"为了确保我们移动切换按钮，即使我们不关闭sidenav它。

所以这个的风格是这样的

CSS

.button{
  position:absolute;
  width:40px;
  height:40px;
  background-color: green;
  color:black;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  top: 50%;
  right:0;
  z-index: 2;
  transform: translate3d(0,0,0);
  transition:0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.open{
  transform: translate3d(-200px,0,0);
  transition:0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

在transition效果上，您会看到一个cubic-bezier(0.25, 0.8, 0.25, 1);用于sidenav显示其内容的转换。因此，在我们的按钮中使用了这种过渡，它将完美地适应sidenav移动。

最后在你的打字稿文件上，你只需要切换你的功能sidenav

TS

@ViewChild('sidenav') sidenav: MatSidenav;

opened: boolean = false;

toggle(){
  this.opened = !this.opened
  if(this.opened){
      this.sidenav.open();
    }else{
      this.sidenav.close();
    }
}

close() {
  this.opened = false;
  this.sidenav.close();
}

在这里，您可以看到正在运行的 stackblitz。

于 2020-08-08T16:52:18.723 回答