md-tab-bodyをスティッキーmd-tab-labelでスクロール可能にする

Question

ちょうどアンギュラのマテリアルmd-tab-bodyをスティッキーなmd-tab-labelでスクロール可能にしようとしています。現時点では、md-contentのmd-tabsをラップしましたが、これはスクロール可能なmd-tab-labelsにつながります。

<md-content> 
<md-tabs> 
    <md-tab> 
     <md-tab-label> 
      <p>Sticky Tab A</p> 
     </md-tab-label> 
     <md-tab-body> 
      <div>Scrollable Content of tab A</div> 
     </md-tab-body> 
    </md-tab> 
    <md-tab> 
     <md-tab-label> 
      <p>Sticky Tab B</p> 
     </md-tab-label> 
     <md-tab-body> 
      <div>Scrollable Content of tab B</div> 
     </md-tab-body> 
    </md-tab> 
</md-tabs> 
</md-content> 

私はplnkr

Answer 1

問題は、それが正常に動作し、最新バージョンを使用するようにしてください、あなたの材料のバージョンである作りました。

<script src="//code.angularjs.org/1.6.1/angular.js"></script> 
<script src="//code.angularjs.org/1.6.1/angular-aria.js"></script> 
<script src="//code.angularjs.org/1.6.1/angular-animate.js"></script> 
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script> 
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script> 
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css" /> 

DEMO