设置md-grid-list的样式

时间:2016-05-31 00:31:33

标签: angular-material

我正在使用Angular Material网格列表来显示大约500到1000个项目。我无法按照自己的喜好设计风格。以下是网格列表现在的样子:

<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
              md-row-height="16:9"
              md-gutter="12px" md-gutter-gt-sm="8px">

  <md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1"
                style="background: #f5f5f5"
                layout-align="center center"
                ng-click="vm.addOrder(orgOrder)">
    <div layout="column">
      <div> {{orgOrder.orderNumber}}</div>
      <!--<div> {{orgOrder.reqExFact | date : 'dd/MM/yyyy'}}</div>-->
    </div>

  </md-grid-tile>
</md-grid-list>

my awesome grid list

以下是我想做的事情:

  1. 我的网格标题(项目)对于单行而言太大了,如何使我的网格标题适合其中的数据?设置md-row-height =&#34; fit&#34;让它看起来像这样。 enter image description here
  2. 目前我的网格列表是几个卷轴&#39;长。我想将它放入一个容器中并添加一个滚动条。在md-container中对我的网格列表或网格标题进行变形会将其高度设置为0.
  3. 如果您需要查看我的更多代码,请告诉我。

    这是一个类似于我的代码的jsfiddle:https://jsfiddle.net/rakshak/6tjgbb85/

    我希望网格标题(项目)能够在其中包含文本,我想在整个网格列表中包装一个容器,并且有一个溢出滚动条而不是整个窗口滚动。

1 个答案:

答案 0 :(得分:1)

设置md-row-height如md-row-height="20px"md-row-height="30px"似乎可以很好地解决高度问题。将网格嵌套在固定高度div中定义如下:

.tileContainer {display:block;
    width:100%;
    height:100px;}

将为您提供磁贴的滚动条。

我在这里分叉你的傻瓜:https://jsfiddle.net/uegLh6t4/