2017-04-06 3 views
2

フレックスレイアウトを使用している最初の角度2.4 /角度材質のアプリケーションにぶち当たっています。それは、画面を満たす3つの行を持つ1つの列を持っています。私は下の2つの行の間にスプリッタを追加し、デスクトップとタッチスクリーンの両方でスプリッタをドラッグすることで、それぞれの高さをリサイズできるようにしたいと考えています。私はこの機能を宣伝するいくつかの利用可能なモジュールを実装しようとしましたが、それぞれにさまざまな問題がありました。角度分割は最も有望でしたが、既存のコード/ webpackビルド設定との互換性の問題があるようです。https://bertrandg.github.io/angular-split/#/角度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> 

答えて

2

あなたはこの1にして外観を持っている必要があります。ここに

  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から
局所的に上記のようなデモを実行します
関連する問題