Question

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

<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

Plunker here

Answer 1

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

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

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

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

Answer 3

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

我不确定这是不是一个坏的或好的方法但我在角材料1.1.0（RC4）中找不到任何替代方法。

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

3 个答案: