如何在 Material 中为 md-tab-group 标签添加垂直滚动答案

【问题标题】：How to add vertical scrolling to md-tab-group tag in Material如何在 Material 中为 md-tab-group 标签添加垂直滚动
【发布时间】：2018-02-19 23:49:57
【问题描述】：

如果我可以为 md-tab-group 制作一个水平滚动条，我真的很有趣。我的意思不仅仅是像一个箭头，而是添加一个水平滚动条？哪个会在组件上滚动？

<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>

这是一个简单的例子，我想知道如何在这里实现滚动条？

【问题讨论】：

欢迎来到 Stack Overflow - 很高兴有你。请阅读 How do I ask a good question? 和 How to create a Minimal, Complete, and Verifiable example 以帮助将 Stack Overflows 内容保持在尽可能高的水平，并增加获得适当答案的机会。请在此处粘贴您现在拥有的代码。
什么是md-tab-group？你的意思是md-tabs？您应该能够在每个 md-tab 内添加一个 md-content 元素，但高度固定。
哦，对不起，我的意思是水平滚动条。问题是：如果有很多项目，最好有滚动条。有没有办法实现它？

标签： html css angular angular-material material-design

【解决方案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

【讨论】：