Angular Material -md-grid-list 内容
Angular Material -md-grid-list content
我正在尝试使用 angular 的 md-grid-tile
material.The 我面临的问题是 md-grid-tile
的内容已对齐 center.How 才能正常工作从开始
<md-content layout-padding>
<md-grid-list md-cols="6"
md-row-height-gt-md="1:1" md-row-height="4:3" 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>
当前快照
想要的快照
下次尝试提供 codepen/plunkr 示例,如果人们有示例代码可以尝试,他们会更愿意帮助您。
您应该阅读 angular-material layout。您主要是在 md-grid-tile
中缺少一个 <div layout="column" layout-fill>
容器。 layout-fill
使容器填满整个图块。
然后您可以使用固定 css 尺寸调整卡片尺寸或弯曲它们。该示例将它们水平弯曲,这可能是不希望的。
我正在尝试使用 angular 的 md-grid-tile
material.The 我面临的问题是 md-grid-tile
的内容已对齐 center.How 才能正常工作从开始
<md-content layout-padding>
<md-grid-list md-cols="6"
md-row-height-gt-md="1:1" md-row-height="4:3" 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>
当前快照
想要的快照
下次尝试提供 codepen/plunkr 示例,如果人们有示例代码可以尝试,他们会更愿意帮助您。
您应该阅读 angular-material layout。您主要是在 md-grid-tile
中缺少一个 <div layout="column" layout-fill>
容器。 layout-fill
使容器填满整个图块。
然后您可以使用固定 css 尺寸调整卡片尺寸或弯曲它们。该示例将它们水平弯曲,这可能是不希望的。