角度材质：嵌套网格

问题描述：

我目前正在使用Bootstrap作为Web应用程序，但想切换到Angular Material。现在我正在玩网格。

I'm currently using Bootstrap for a web application, but want to switch to 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.

此外，我想要一个 grid-title 的标题，以免干扰孩子 grid-list （我想让孩子 grid-list 从 grid-title-header $下面开始C $ C>）。最老的父母的页脚也是如此。

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). The same goes with the "oldest" parent's footer.

Angular Material网站良好的文档，但不解决嵌套网格。

The Angular Material site has good documentation but doesn't address nested grids.

这是一个plnkr 。

<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>

到目前为止，我非常喜欢Material Design，并且相信它是响应式网页设计的未来。我认为越来越多的网站将使用它代替Bootstrap（Bootstrap的JS组件完全依赖jQuery，除非你使用类似AngularUI的东西），所以我想学习如何正确使用它。

I really like Material Design so far, and believe it's the future of responsive web 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.

答

我认为Angular Material网站缺少此布局指令的文档，但 layout-fill 正是我想要的。

I believe the Angular Material site lacks documentation for this layout directive, but layout-fill is exactly what I was looking for.

这是一个更新的plnkr 。

在嵌套网格列表上定义 layout-fill 。

Just define layout-fill on the nested grid list.

<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>

放大......

<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>

此解决方案不包括tile页眉和页脚的解决方案，但我想你可以定义某种定位让它发挥作用。

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.

角度材质：嵌套网格

相关推荐