Angular Material -md-grid-list 内容

Posted 2023-03-06

【中文标题】Angular Material -md-grid-list 内容

【英文标题】：Angular Material -md-grid-list content

【发布时间】：2016-04-18 10:52:51

【问题描述】：

我正在尝试使用 md-grid-tile 的角材料。我面临的问题是 md-grid-tile 的内容对齐中心。如何从开始工作

    <md-content layout-padding> 

         <md-grid-list md-cols="6"
            md-row-height-gt-md="1:1" md-row- md-gutter-gt-md="16px"
            md-gutter-gt-sm="8px" md-gutter="4px"> 
                    <md-grid-tile
                    ng-repeat="room in floorDetails.roomDetails"
                    ng-style="'background': '#f2f2f2'"
                    md-colspan-gt-sm="3"
                    md-rowspan-gt-sm="2">  



                                <div layout="row"  layout-align="center center">
                                <b >Room1</b>
                                </div>
                                 <div class='md-padding' layout="row" layout-wrap>
                                         <md-card class="md-card" ng-repeat="bed in room.bedIds">
                                             <md-card-content>

                                             </md-card-content>
                                         </md-card>
                                     </div>
                             </div>
              </md-grid-tile>        
      </md-grid-list>  

当前快照

想要的快照

【参考方案1】：

下次尝试提供一个带有示例的codepen/plunkr，如果他们有示例代码可以玩，人们更愿意帮助你。

您应该阅读angular-material layout。您主要在md-grid-tile 中缺少<div layout="column" layout-fill> 容器。 layout-fill 使容器填满整个图块。

然后，您可以使用固定的 css 大小调整卡片的大小或对其进行调整。该示例将它们水平弯曲，这可能是不需要的。

codepen

【讨论】：

似乎（还）不适用于 Angular 2 Material Design 位