Angular 2 Material Flex-layout 分割面板

Question

我在第一个使用 flex-layout 的 Angular 2.4/Angular Material 应用程序中跌跌撞撞。它有一列三行填满屏幕。我想在底部两行之间添加一个拆分器，并允许通过在桌面和触摸屏上拖动拆分器来调整每行的高度。我试图实现几个宣传此功能的可用模块，但每个模块都存在各种问题。 Angular-split 是最有前途的，但似乎与我现有的代码/webpack 构建配置存在兼容性问题:https://bertrandg.github.io/angular-split/#/

任何人都有此类功能的任何工作示例，可以帮助我入门。

欢迎任何意见。

<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>

Answer 1

你可能需要看看这个:

1. 拆分 Pane 演示 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 - 在本地运行上面的演示