如何折叠面板？

Question

我一直在做很多研究,但找不到好的解决方案.基本上,我在我的应用程序中有一个面板,(Panel 2)并且想要在单击按钮时将其折叠到左侧,如果再次单击该按钮,则将其展开到右侧.

这是我的工作代码: PLUNKER

---

  <div fxFlex fxLayout="row" fxLayoutAlign="space-between stretch" style="background-color:green;">
      <div fxFlex [fxShow]="explorerShow"  style="background-color:white;">        
 <div  (click)="toggleDirection()" > <img src="../../../assets/images/button1.png" alt="Button" style = 'float: right'>
 </div>
      Panel 2
 </div>

Answer 1

在面板 2元素上使用fxHideand[fxShow]="expand"

<div class="container">

  <div class="content" fxLayout="row" fxFlexFill>

      <div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
          SIDEBAR
      </div>
      <div class="sec2" fxFlex="100%">
          BODY
      </div>
  </div>

  <button (click)="expand = !expand">Toggle Sidebar</button>

</div>

这是一个正在运行的stackblitz | 你的笨蛋

更新：这是带有动画的堆栈闪电战