Angular 2材质弹性布局分割窗格

问题描述:

我在使用flex-layout的第一个角度2.4/Angular材质应用程序中蹒跚而行。它有一列三行填满屏幕。我想在底部两行之间添加一个分隔线,并通过在桌面和触摸屏上拖动分隔线来使每个分隔线的高度可以重新调整大小。我试图实现几个可用的模块来宣传此功能,但每个模块都有各种问题。角分裂是最有前途的,但似乎与我现有的代码/ webpack构建配置兼容性问题:https://bertrandg.github.io/angular-split/#/Angular 2材质弹性布局分割窗格

任何人都有这种类型的功能,可能会帮助我开始工作的任何示例。

任何输入表示赞赏。

<div class="flex-container content" fxLayout="column" fxLayoutAlign="top center"> 
    <div class="flex-item search-topbar" fxFlex="35%"> 
    </div> 
    <div class="flex-item" fxFlex="40%"> 
     <!--Map--> 
    </div> 
    <div class="flex-item result-bar" fxFlex="25%"> 
     <!--Search Results-->  
    </div> 
</div> 

您可能需要有一个看看这个:

  1. 拆分窗格演示https://plnkr.co/bxgcK29PNl9lexw6z6Ym
  2. https://github.com/wannabegeek/ng2-split-pane

而且flex-layout文档和例子在这里:

  1. 演示:https://tburleson-layouts-demos.firebaseapp.com/#/docs
  2. 文档:https://github.com/angular/flex-layout/wiki
  3. git clone https://github.com/angular/flex-layout
  4. npm run demo-app - 运行演示如上局部