角度材质：嵌套网格
[英]Angular Material: Nested grid
问题描述
I'm currently using Bootstrap for a web application, but want to switch to Angular Material. 
我目前正在使用Bootstrap作为Web应用程序，但想切换到Angular Material。 Right now I am playing around with the grid. 现在我正在玩网格。
I have triple nested grid structure. 我有三重嵌套网格结构。 I don't think the children are being displayed correctly, or at least I haven't programmed them to display correctly. 我认为孩子们没有正确显示，或者至少我没有将它们编程为正确显示。 I want them to not be vertically centered, but I don't know why they are behaving this way. 我希望他们不要垂直居中，但我不知道他们为什么会这样做。
Additionally, I want a grid-title 's header to not interfere with the child grid-list (I want the child grid-list to begin underneath the grid-title-header ). 另外，我希望grid-title的标题不会干扰子grid-list （我希望子grid-list在grid-title-header下面开始）。 The same goes with the "oldest" parent's footer. “最老的”父母的页脚也是如此。
The Angular Material site has good documentation but doesn't address nested grids. Angular Material站点具有良好的文档，但不涉及嵌套网格。
<body ng-app="app">
<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="4:3" md-gutter="8px"
md-gutter-gt-sm="4px" class="gridList">
<md-grid-tile md-rowspan="1" md-colspan="1" md-colspan-sm="1" class="gridTile">
<md-grid-list flex="" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="1:1">
<md-grid-tile md-rowspan="2" md-colspan="1" class="flexTile">
<md-grid-tile-header><h4>Sub-cluster Title</h4></md-grid-tile-header>
<md-grid-list flex="" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3"
md-row-height="1:1">
<md-grid-tile md-colspan="1" md-rowspan="2" class="instanceTile">
ID
</md-grid-tile>
</md-grid-list>
</md-grid-tile>
</md-grid-list>
<md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
</body>
I really like Material Design so far, and believe it's the future of responsive web design. 到目前为止，我非常喜欢Material Design，并且相信它是响应式网页设计的未来。 I think more and more websites are going to be using it in place of Bootstrap (Bootstrap's JS components are totally jQuery dependent unless you are using something like AngularUI), so I want to learn how to use it properly. 我认为越来越多的网站将使用它代替Bootstrap（Bootstrap的JS组件完全依赖于jQuery，除非你使用类似AngularUI的东西），所以我想学习如何正确使用它。
1 个解决方案
解决方案1
3 2015-10-01 16:11:10
I believe the Angular Material site lacks documentation for this layout directive, but layout-fill is exactly what I was looking for. 我相信Angular Material网站缺少此布局指令的文档，但layout-fill正是我所寻找的。
Here's an updated plnkr . 这是一个更新的plnkr 。
Just define layout-fill on the nested grid list. 只需在嵌套网格列表上定义layout-fill 。
<md-grid-list flex md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"
md-gutter-gt-sm="4px" class="gridList" layout="row">
<md-grid-tile md-colspan="1" md-colspan-sm="1" class="gridTile">
<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
md-rows-md="4" layout-fill>
<md-grid-tile md-colspan="1" md-rowspan="1" layout="col"
class="flexTile">
Tile
</md-grid-tile>
</md-grid-list>
<md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
And zooming in... 并放大......
<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
md-rows-md="4" layout-fill>
<md-grid-tile md-colspan="1" md-rowspan="1" layout="col"
class="flexTile">
Tile
</md-grid-tile>
</md-grid-list>
This solution doesn't include the solve for tile headers and footers, but I imagine you could just define some sort of positioning to make it work. 此解决方案不包括tile页眉和页脚的解决方案，但我想你可以定义某种定位以使其工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.