如何在材料中添加垂直滚动到MD-TAB组标签

Question

如果我可以为MD-TAB组制作水平滚动条，我真的很有趣。我的意思是不仅像箭头一样，还要添加水平滚动栏吗？哪个将在组件上滚动？

<md-tab-group>
    <md-tab label="Item1"></md-tab>
    <md-tab label="Item2"></md-tab>
    <md-tab label="Item3"></md-tab>
    <md-tab label="Item4"></md-tab>
    <md-tab label="Item5"></md-tab>
</md-tab-group>

这是一个简单的例子，我想知道我该如何在这里实现卷轴？

Answer 1

首先，使用md-no-pagination指令删除箭头。第二步是覆盖md-tabs-canvas样式：

<md-tabs class="example" md-no-pagination>
  <md-tab ng-repeat="label in array" label="{{label}}">
    Tab {{$index}} content
  </md-tab>
</md-tabs>

。

.example md-tabs-canvas {
  overflow-x: scroll !important
}

这是一个工作示例：https：//codepen.io/anon/pen/qpwexx