Question

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

我有三重嵌套网格结构。我不认为孩子们正确地显示，或者至少我没有对他们进行编程以正确显示。我希望他们不要垂直居中，但我不知道为什么他们这样做。

此外，我希望grid-title标题不会干扰孩子grid-list（我希望孩子grid-list从grid-title-header下方开始）。最老的＆＃34;同样如此。父母的页脚。

Angular Material site包含良好的文档但不能解决嵌套网格问题。

<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这样的东西），所以我想学习如何正确使用它。

Answer 1

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

Here's an updated plnkr

只需在嵌套网格列表中定义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>

放大...

<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页眉和页脚的解决方案，但我想你可以定义某种定位以使其正常工作。

角度材质：嵌套网格

1 个答案: