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 元素上使用fxHide和[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 | your plunkr

更新：这是stackblitz with animation

如何折叠面板？

1 个答案: