如何修复 md-tabs 和 md-toolbar 并滚动 md-content？答案

【问题标题】：How to fix md-tabs and md-toolbar and scroll md-content?如何修复 md-tabs 和 md-toolbar 并滚动 md-content？
【发布时间】：2015-06-22 12:26:10
【问题描述】：

我正在尝试做这样的事情：

<md-tabs>
  <md-tab label="First Tab">
    <md-toolbar></md-toolbar>
    <md-content>
      <md-list>
        <md-list-item ng-repeat="item in items">
          <md-item-content>
            <div>
              {{item}}
            </div>
          </md-item-content>
        </md-list-item>
      </md-list>
    </md-content>

  </md-tab>
  <md-tab label="Second tab">
    <md-list flex>
      <md-list-item ng-repeat="item in items">
        <md-item-content>{{item}}</md-item-content>
      </md-list-item>
    </md-list>
  </md-tab>
</md-tabs>

我希望选项卡和工具栏固定（始终可见）并且列表的内容可以滚动。我找不到办法做到这一点。报告了其他类似的问题（例如here），但它们似乎已经过时并且据说已修复。我正在使用角度材料 0.10.0

Plunkerhere

【问题讨论】：

你找到解决办法了吗？

标签： javascript angularjs angular-material

【解决方案1】：

你可以用一点 CSS 做到这一点。

Add a class to the elements with position:fixed !important

别忘了使用 !important 。这将覆盖选项卡和工具栏的默认位置属性

【讨论】：

【解决方案2】：

这应该对你有帮助

<body layout="column">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>
        <span>Toolbar</span>
      </h2>
    </div>
  </md-toolbar>
  <md-tabs md-stretch-tabs>
    <md-tab>
      <md-tab-label>
        Tab 1
      </md-tab-label>
    </md-tab>
    <md-tab>
      <md-tab-label>
        Tab 2
      </md-tab-label>
    </md-tab>
  </md-tabs>
  <md-content flex>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    Hello world
  </md-content>
</body>

【讨论】：

如果你为每个标签添加一个就可以了。问题是内容不能从中的提供的动画中受益。

【解决方案3】：

您可以使用“md-subheader”作为父容器。它的默认行为是粘性的。它的文档是https://material.angularjs.org/latest/api/directive/mdSubheader

我不确定这是一个坏方法还是好方法，但我在 angular material 1.1.0 (RC4) 中找不到任何替代方法。

【讨论】：