Angular 2 Material Flex-layout分割窗格

时间:2017-04-06 20:02:36

标签: angular angular-material resizable splitpane panes

我在第一个使用flex-layout的角度2.4 / Angular材质应用程序中遇到了障碍。它有一列有三行填满屏幕。我想在底部两行之间添加一个分割器,并通过在桌面和触摸屏上拖动分割器来允许每个分割器的高度可重新调整大小。我试图实现几个宣传此功能的可用模块,但每个模块都有各种问题。 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>

1 个答案:

答案 0 :(得分:2)

您可能需要查看此内容:

  1. 拆分窗格演示https://plnkr.co/bxgcK29PNl9lexw6z6Ym
  2. 来源https://github.com/wannabegeek/ng2-split-pane
  3. 此处有flex-layout个文档和示例:

    1. demo:https://tburleson-layouts-demos.firebaseapp.com/#/docs
    2. docs:https://github.com/angular/flex-layout/wiki
    3. 来源git clone https://github.com/angular/flex-layout
    4. npm run demo-app - 在本地运行演示