如何使用粘性md-tab-label使md-tab-body可滚动

时间:2017-02-11 11:11:36

标签: angularjs angular-material

我正在尝试使用粘性md-tab-label制作只有角度的材质md-tab-body可滚动。目前我在md-contents中包装了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

1 个答案:

答案 0 :(得分:0)

问题在于您的材料版本,尝试使用最新版本,它运行正常。

<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