Question

我无法让md-grid-list显示在md-tab中。

我基本上从这里https://material.angularjs.org/#/demo/material.components.gridList复制了md-grid-list，并嵌入在一组动态生成的标签下。

网格列表不会显示在任何标签上。理想情况下，如果有意义的话，我希望网格列表在选项卡下方左对齐和顶部对齐。 CSS并不是我的强项...

我在这里有一个示例小提琴https://jsfiddle.net/lunfort/vsqs0dzw/5/

<div>
  <md-tabs>
    <md-tab ng-repeat="tabname in tabs" label="{{tabname}}">  
      <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px" >
        <md-grid-tile class="gray" md-rowspan="3" md-colspan="2">
          <md-grid-tile-footer>
            <h3>#1: (3r x 2c)</h3>
          </md-grid-tile-footer>
        </md-grid-tile>
        <md-grid-tile class="green">
          <md-grid-tile-footer>
            <h3>#2: (1r x 1c)</h3>
          </md-grid-tile-footer>
        </md-grid-tile>
        <md-grid-tile class="yellow">
          <md-grid-tile-footer>
            <h3>#3: (1r x 1c)</h3>
          </md-grid-tile-footer>
        </md-grid-tile>
        <md-grid-tile class="blue"md-rowspan="2">
          <md-grid-tile-footer>
            <h3>#4: (2r x 1c)</h3>
          </md-grid-tile-footer>
        </md-grid-tile>
        <md-grid-tile class="red" md-rowspan="2" md-colspan="2">
          <md-grid-tile-footer>
            <h3>#5: (2r x 2c)</h3>
          </md-grid-tile-footer>
        </md-grid-tile>
        <md-grid-tile class="green" md-rowspan="2" >
          <md-grid-tile-footer>
            <h3>#6: (2r x 1c)</h3>
          </md-grid-tile-footer>
        </md-grid-tile>
      </md-grid-list>
    </md-tab>
  </md-tabs>
</div>

Answer 1

我看到小提琴中的瓷砖，或者更确切地说是瓷砖页脚，因为瓷砖在白色背景上是白色的。你需要滚动才能看到它们。

尝试将md-dynamic-height添加到<md-tabs>，即<md-tabs md-dynamic-height> - 这将为您的标签内容提供更多屏幕空间。

角度材料md-tabs和md-grid-lists

1 个答案: