角料MD-选项卡和MD-网格列表 [英] angular material md-tabs and md-grid-lists

问题描述

我不能让MD-网格列表到MD-选项卡中显示明显

我基本上复制从这里 HTTPS的MD-网格列表：//材料.angularjs.org /＃/演示/ material.components.gridList 并嵌入了一套dyanmically生成的标签下。

网格列表不任何选项卡上，从我可以告诉展示。理想情况下，我想左对齐网格列表顶部的选项卡下如果是有道理的。 CSS是不是真的我的专长......

我这里有一个样本小提琴 https://jsfiddle.net/lunfort/vsqs0dzw/5/

 ＆LT; D​​IV＆GT;
  ＆LT; MD-标签＆GT;
    ＆LT; MD-NG选项卡重复=TABNAME在标签标签={{TABNAME}}＆GT;
      ＆下; MD-网格列表MD-COLS-SM =1MD-COLS-MD =2MD-COLS-GT-MD =6MD-行高度-GT-MD =1：1 MD-行高度=2：2MD-水沟=12px的MD-水沟-GT-SM =8像素＆GT;
        ＆下; MD-网格瓦片类=灰色MD-行跨度=3MD-列跨度=2＆GT;
          ＆LT; MD-网格瓦尺＆GT;
            ＆LT; H3＆GT;＃1：（3R点¯x2C）＆LT; / H3 GT＆;
          ＆LT; / MD-网格瓦尺＆GT;
        ＆LT; / MD-格砖＆GT;
        ＆LT; MD-网格瓦级=绿色＆GT;
          ＆LT; MD-网格瓦尺＆GT;
            ＆LT; H3＆GT;＃2：（1R点¯x1C）LT; / H3 GT＆;
          ＆LT; / MD-网格瓦尺＆GT;
        ＆LT; / MD-格砖＆GT;
        ＆LT; MD-网格瓦级=黄色＆GT;
          ＆LT; MD-网格瓦尺＆GT;
            ＆LT; H3＆GT;＃3：（1R点¯x1C）LT; / H3 GT＆;
          ＆LT; / MD-网格瓦尺＆GT;
        ＆LT; / MD-格砖＆GT;
        ＆下; MD-网格瓦片类=蓝色MD-行跨度=2＆GT;
          ＆LT; MD-网格瓦尺＆GT;
            ＆LT; H3＆GT;＃4：（2R点¯x1C）LT; / H3 GT＆;
          ＆LT; / MD-网格瓦尺＆GT;
        ＆LT; / MD-格砖＆GT;
        ＆下; MD-网格瓦片类=红MD-行跨度=2MD-列跨度=2＆GT;
          ＆LT; MD-网格瓦尺＆GT;
            ＆所述; H3＆GT;＃5：（2R点¯x图2c）所述; / H3＆GT;
          ＆LT; / MD-网格瓦尺＆GT;
        ＆LT; / MD-格砖＆GT;
        ＆LT; MD-网格瓦级=绿色MD-行跨度=2＆GT;
          ＆LT; MD-网格瓦尺＆GT;
            ＆LT; H3＆GT;＃6：（2R点¯x1C）LT; / H3 GT＆;
          ＆LT; / MD-网格瓦尺＆GT;
        ＆LT; / MD-格砖＆GT;
      ＆LT; / MD-网格列表＆gt;
    ＆LT; / MD-标签＆gt;
  ＆LT; / MD-标签＆GT;
＆LT; / DIV＆GT;
 

解决方案

我看到了瓷砖小提琴，或者更准确的瓷砖页脚，因为砖是白色在白色背景上。你需要滚动看到他们虽然。

尝试添加 MD-动态高度到＆LT; MD-标签＆GT; ，即＆LT; MD-标签MD-动态高度方式＆gt; - 这会给你更多的屏幕房地产为您的标签内容

I can not get md-grid-list to visibly display within an md-tab.

I basically copied the md-grid-list from here https://material.angularjs.org/#/demo/material.components.gridList and embedded under a set of dyanmically generated tabs.

The grid list does not display on any tab from what I can tell. Ideally I would like the grid list to be aligned left and top under the tab if that makes sense. CSS is not really my forte ...

I have a sample fiddle here 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>

解决方案

I'm seeing the tiles in fiddle, or more accurately the tile footers, as the tiles are white on a white background. You'll need to scroll to see them though.

Try adding md-dynamic-height to <md-tabs>, i.e. <md-tabs md-dynamic-height> - that will give you more screen real estate for your tab content.

这篇关于角料MD-选项卡和MD-网格列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！